വെബ്സൈറ്റ് ലേഔട്ട്: html ൽ ഒരു പശ്ചാത്തലം ഉണ്ടാക്കുക

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

ഒരു പശ്ചാത്തലം സൃഷ്ടിക്കുന്നതിനുള്ള അടിസ്ഥാന HTML ടാഗുകൾ

അതിനാൽ, മുഴുവൻ സ്ക്രീനിൽ html- ൽ ഒരു പശ്ചാത്തല ഇമേജ് എങ്ങനെ ഉണ്ടാക്കാം എന്ന് നമുക്ക് ചോദ്യം ചെയ്യാം. മനോഹരമായി കാണാൻ സൈറ്റിന്, നിങ്ങൾ ഒരു പ്രധാനപ്പെട്ട വിശദാംശം മനസിലാക്കേണ്ടതുണ്ട്: ഗ്രേഡിയന്റ് പശ്ചാത്തലം ഉണ്ടാക്കുക അല്ലെങ്കിൽ ഒരു മോണോക്രോം കളർ കൊണ്ട് വരച്ചാൽ മാത്രം മതി, പശ്ചാത്തലത്തിൽ ഒരു ചിത്രം തിരുകുകയാണെങ്കിൽ, അത് മോണിറ്ററിന്റെ മുഴുവൻ വീതിയിലും നീട്ടും. ഇമേജ് പ്രാരംഭപരമായി തിരഞ്ഞെടുക്കപ്പെടുകയോ അല്ലെങ്കിൽ സ്വതന്ത്രമായി അത്തരമൊരു വിപുലീകരണത്തോടുകൂടിയ ഒരു രൂപകൽപ്പന ആയിരിക്കണം, അതിൽ പ്രദർശിപ്പിക്കുന്ന സൈറ്റിന്റെ ഒരു പേജ് നിങ്ങൾക്ക് ഉണ്ടായിരിക്കും. പശ്ചാത്തല ഇമേജ് തയ്യാറെടുത്തതിനുശേഷം മാത്രമേ അത് "ചിത്രങ്ങൾ" എന്ന ഫോൾഡറിലേക്ക് ട്രാൻസ്ഫർ ചെയ്യുക. അതിൽ ഉപയോഗിച്ചിരിക്കുന്ന എല്ലാ ചിത്രങ്ങളും, ആനിമേഷനുകളും, മറ്റ് ഗ്രാഫിക് ഫയലുകളും ഞങ്ങൾ ശേഖരിക്കും. ഈ ഫോൾഡർ നിങ്ങളുടെ എല്ലാ html ഫയലുകളുമുള്ള റൂട്ട് ഡയറക്ടറിയിൽ ആയിരിക്കണം. ഇനി നിങ്ങൾക്ക് കോഡ് പോകാൻ കഴിയും. കോഡ് എഴുതാൻ നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്, അവ പശ്ചാത്തലത്തിൽ ഒരു ചിത്രത്തിലേക്ക് മാറ്റുമ്പോൾ.

1. ടാഗ് ആട്രിബ്യൂട്ട് എഴുതുക.
2. HTML കോഡിലെ CSS ശൈലിയിലൂടെ.
3. മറ്റൊരു രീതിയിൽ CSS സ്റ്റൈൽ എഴുതുക.

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

1. Index.htm ഫയലിൽ ബോഡി ആട്രിബ്യൂട്ട് വഴി എഴുതാനുള്ള ആദ്യമാർഗം. ഇത് ഈ രൂപത്തിലാണ് എഴുതിയിരിക്കുന്നത്: (body background = "Folder_name / Picture_name.extension") (/ ശരീരം). അതായത്, "പിക്ചർ" എന്ന ചിത്രവും JPG എന്ന എക്സ്റ്റെൻഷനും നമ്മൾ ഫോൾഡറിനായി "ഇമേജുകൾ" എന്ന് നാമകരണം ചെയ്തിട്ടുണ്ടെങ്കിൽ, അപ്പോൾ HTML കോഡ് ഇതുപോലെ കാണപ്പെടും: (body body = "Images / Picture.jpg") ... (/ body) .
2. എഴുത്തിന്റെ രണ്ടാം രീതി CSS ശൈലിയെ ബാധിക്കുന്നു, എന്നാൽ അതേ ഫയലിൽ index.htm എന്ന പേരിൽ എഴുതപ്പെടുന്നു. (ബോഡി സ്റ്റൈൽ = "പശ്ചാത്തലം: url ('.. Images / Picture.jpg')").
3. കൂടാതെ റെക്കോർഡിങിന്റെ മൂന്നാമത്തേതും രണ്ട് ഫയലുകളിലുണ്ട്. Index.htm എന്ന ഡോക്യുമെന്റിൽ താഴെക്കൊടുത്തിരിക്കുന്ന ടാഗ് head tag ൽ എഴുതുന്നു: (head) (ലിങ്ക് rel = "stylesheet" type = "text / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_file ") (/ head). കൂടാതെ style.css എന്ന പേരിൽ സ്റ്റൈൽ ഫയലിൽ നമ്മൾ ഇതിനകം എഴുതാം: body {background: url (Images / Picture.jpg '}}).

ഒരു പശ്ചാത്തല ചിത്രം ഉണ്ടാക്കുവാൻ HTML ഉള്ളതുപോലെ, ഞങ്ങൾ വേർപെടുത്തപ്പെട്ടു. ഇപ്പോൾ മുഴുവൻ സ്ക്രീനിന്റെ വീതിയിലുടനീളമുള്ള ചിത്രം എങ്ങനെ നീട്ടണമെന്ന് നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട്.

വിൻഡോയുടെ വീതിയിലേക്ക് പശ്ചാത്തല ചിത്രം നീട്ടാനുള്ള വഴികൾ

ഞങ്ങളുടെ സ്ക്രീൻ ഒരു ശതമാനമായിരിക്കുമെന്ന് സങ്കൽപ്പിക്കുക. സ്ക്രീനിന്റെ മൊത്തം വീതിയും ദൈർഘ്യവും 100% x 100% ആയിരിക്കുമെന്നാണ്. ചിത്രം ഈ വീതിയിലേക്ക് നീട്ടണം. Style.css ഫയലിൽ ഇമേജ് എൻട്രിയിലേക്കു് ചേരുക, സ്ക്രീനിന്റെ പൂർണ്ണ വീതിക്കും നീളത്തിനുമുള്ള ഒരു സ്ട്രിങ്. എങ്ങനെയാണ് സി.എസ്.എസ് രീതിയിൽ എഴുതിയിരിക്കുന്നത്? ഇത് ലളിതമാണ്!

ശരീരം

{

പശ്ചാത്തലം: url (Images / Picture.jpg ')

പശ്ചാത്തല വലുപ്പം: 100%; / * ഈ എൻട്രി ഏറ്റവും പുതിയ ആധുനിക ബ്രൗസറുകൾക്ക് അനുയോജ്യമാണ് * /

}

അതിനാൽ മുഴുവൻ സ്ക്രീനിൽ html ൽ ഒരു പശ്ചാത്തല ഇമേജ് എങ്ങനെ ഉണ്ടാക്കാം എന്ന് ഞങ്ങൾ മനസ്സിലാക്കി. Index.htm ഫയലിൽ എഴുതാനുള്ള ഒരു വഴിയും ഉണ്ട്. ഈ രീതി കാലഹരണപ്പെട്ടതാണെങ്കിലും, തുടക്കക്കാർക്ക് അത് മനസ്സിലാക്കാനും മനസ്സിലാക്കാനും അത് ആവശ്യമാണ്. ടാഗ് (തല) (ശൈലി) ഡിയിൽ {background-size: cover; } (/ ശൈലി) (/ head) ഈ റെക്കോഡ് എന്നത് പശ്ചാത്തലത്തിനായുള്ള ഒരു പ്രത്യേക ബ്ലോക്ക് തിരഞ്ഞെടുക്കുമെന്നാണ്, അത് വിൻഡോയുടെ മുഴുവൻ വീതിയിലും സ്ഥാപിതമായിരിക്കും. സൈറ്റിന്റെ പശ്ചാത്തലത്തെ ഒരു html ഇമേജ് ഉണ്ടാക്കുന്നതിനായി രണ്ട് വഴികളെ നോക്കിയത്, അങ്ങനെ ആധുനിക ബ്രൗസറുകളിലെ സ്ക്രീനിന്റെ മുഴുവൻ വീതിയിലും ചിത്രം വ്യാപിപ്പിക്കും.

ഒരു നിശ്ചിത പശ്ചാത്തലം എങ്ങനെ സൃഷ്ടിക്കും

ഭാവി വെബ് റിസോഴ്സസിന്റെ പശ്ചാത്തലമായി ചിത്രം ഉപയോഗിക്കാൻ തീരുമാനിക്കുകയാണെങ്കിൽ, അത് എങ്ങനെ ശരിയാക്കണമെന്ന് നിങ്ങൾ പഠിക്കേണ്ടതുണ്ട്, അതിനാൽ ഇത് ദൈർഘ്യമുള്ളവയല്ല, സൗന്ദര്യാത്മകതയിൽ നിന്ന് വ്യതിചലിക്കുന്നില്ല. ഈ ചെറിയ ആഡ്-ഓൺ എഴുതാൻ എച്ച്.റ്റി.എം.എൽ ഉപയോഗിക്കുന്നത് മതിയാകും. പശ്ചാത്തലത്തിനു ശേഷം നിങ്ങൾ style.css ഫയലിൽ ഒരു വാക്യം ചേർക്കണം: url (Images / Picture.jpg ') ഫിക്സ്ഡ് ചെയ്തു; അല്ലെങ്കിൽ അർദ്ധവിരാമത്തിനു ശേഷം ഒരു പ്രത്യേക വരി ചേർക്കുന്നതിനുപകരം - സ്ഥാനം: നിശ്ചിത. അങ്ങനെയാണെങ്കിൽ, നിങ്ങളുടെ പശ്ചാത്തല ചിത്രം മാറ്റമില്ലാതെ തുടരും. സൈറ്റിലെ ഉള്ളടക്കം സ്ക്രോളുചെയ്യുമ്പോൾ, വാചക വരികൾ നീങ്ങുന്നു, പശ്ചാത്തലത്തിൽ അവശേഷിക്കുന്നു. അതിനൊപ്പം നിങ്ങൾ html ൽ ഒരു പശ്ചാത്തലം എങ്ങനെ പല രീതിയിൽ ചെയ്യാം എന്ന് പഠിച്ചു.

HTML ൽ ഒരു പട്ടിക ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു

പട്ടികകളിലെയും ബ്ലോക്കുകളെയും അഭിമുഖീകരിക്കുന്ന ധാരാളം അനുഭവസമ്പന്നരായ വെബ് ഡവലപ്പർമാർക്ക് പലപ്പോഴും htmlയിൽ ഒരു ചിത്രം എങ്ങനെ പട്ടികയിൽ ഉൾപ്പെടുത്താമെന്ന് മനസിലായില്ല. എല്ലാ HTML , CSS സ്റ്റൈൽ കമാൻഡുകൾ പോലെ , ഈ വെബ് പ്രോഗ്രാമിങ് ഭാഷ വളരെ ലളിതമാണ്. കൂടാതെ ഈ പ്രശ്നത്തിന്റെ പരിഹാരം കോഡുകളുടെ രണ്ട് വരികൾ എഴുതിക്കൊണ്ടിരിക്കും. ടാഗുകൾ (ട്രേ), (td) എന്ന രീതിയിൽ പട്ടിക വരികളും നിരകളും എഴുതുന്നത് യഥാക്രമം സൂചിപ്പിച്ചിട്ടുണ്ടെന്ന് നിങ്ങൾ ഇതിനകം അറിഞ്ഞിരിക്കണം. ഒരു ഇമേജായി പട്ടികയുടെ പശ്ചാത്തലം ഉണ്ടാക്കുവാൻ, ഇമേജിലേക്കുള്ള ലിങ്കിനൊപ്പം ടാഗ് (ടേബിൾ), (ട്രേ) അല്ലെങ്കിൽ (td) ഒരു ലളിതമായ വാചകം ചേർക്കാൻ: ഇമേജിന്റെ പശ്ചാത്തലം = URL. വ്യക്തതയ്ക്കായി, നമുക്ക് രണ്ട് ഉദാഹരണങ്ങൾ നൽകുന്നു.

ഒരു പശ്ചാത്തലത്തിനു പകരം ഒരു ചിത്രമുള്ള ടേബിളുകൾ: എച്.ആർ

2x3 പട്ടിക വരയ്ക്കാം, അത് ഇമേജ് ഫോൾഡറിൽ സംരക്ഷിച്ചിട്ടുള്ള പശ്ചാത്തല ചിത്രം ഉണ്ടാക്കാം: (ടേബിൾ പശ്ചാത്തലം = "ചിത്രങ്ങൾ / Picture.jpg") (ട്രേ) (td) 1 (/ td) (td) 2 (/ td) (td) (ടിഡി) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). അങ്ങനെ നമ്മുടെ പട്ടിക ചിത്രത്തിന്റെ പശ്ചാത്തലത്തിൽ വരച്ചുകാട്ടപ്പെടും.

1, 4, 5, 6 എന്നീ നമ്പറുകളിലുള്ള വരകളിലേക്ക് ചിത്രം തിരുകുന്നു. (പട്ടിക) (ട്രേ) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ Td) (td) 3 (/ td) (/ ട്രേ) (ട്രേ) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") / Td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). കാണുന്നതിനുശേഷം, ഞങ്ങൾ രജിസ്റ്റർ ചെയ്ത സെല്ലുകളിൽ മാത്രമേ പശ്ചാത്തലം പ്രത്യക്ഷപ്പെടുന്നുള്ളൂ, എന്നാൽ മുഴുവൻ പട്ടികയിൽ അല്ല.

ക്രോസ്-ബ്രൌസർ സൈറ്റ്

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