ഒരു ബ്ലോക്ക്ക്വോട്ട് എന്താണ്?

എപ്പോഴൊക്കെ HTML ഘടകങ്ങളുടെ പട്ടികയിൽ നിങ്ങൾ കണ്ടെങ്കിൽ, "ബ്ളോക്ക്ക്വോട്ട് എന്താണ്?" എന്ന് നിങ്ങൾ സ്വയം ചോദിച്ചേക്കാം. നീളമുള്ള ഉദ്ധരണികൾ നിർവചിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു HTML ടാഗ ജോഡിയാണ് blockquote ഘടകം. W3C HTML5 വിശദീകരണമനുസരിച്ച് ഈ മൂലകത്തിന്റെ നിർവചനം ഇതാ:

ബ്ലോക്ക്ക്വേഡ് എലമെൻറ് മറ്റൊരു സ്രോതസ്സിൽ നിന്ന് ഉദ്ധരിച്ച ഒരു വിഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നു.

നിങ്ങളുടെ വെബ്പേജുകളിൽ ബ്ലോക്ക്ക്വോട്ട് എങ്ങനെ ഉപയോഗിക്കാം

നിങ്ങൾ ഒരു വെബ് പേജിൽ വാചകം എഴുതുകയും ആ പേജിന്റെ ലേഔട്ട് സൃഷ്ടിക്കുകയും ചെയ്യുമ്പോൾ, ചിലപ്പോൾ നിങ്ങൾ ഒരു വാചക ബ്ലോക്ക് ഒരു ഉദ്ധരണിയായി വിളിക്കാൻ ആഗ്രഹിക്കുന്നു.

ഒരു കേസ് പഠനം അല്ലെങ്കിൽ പദ്ധതി വിജയഗാഥയോടൊപ്പം ഒരു ഉപഭോക്താവിന്റെ സാക്ഷ്യപത്രം പോലെ മറ്റെവിടെയെങ്കിലും നിന്ന് ഇത് ഉദ്ധരിക്കാം. ഇത് ലേഖനത്തിൽ നിന്നോ ഉള്ളടക്കത്തിൽ നിന്നോ ചില പ്രധാന പദങ്ങൾ ആവർത്തിക്കുന്ന ഒരു ഡിസൈൻ ചികിത്സയായിരിക്കാം. പ്രസിദ്ധീകരിക്കുന്നതിൽ, ഇത് ചിലപ്പോൾ ഒരു പുൾകോട്ട് എന്നു വിളിക്കപ്പെടുന്നു, വെബ് ഡിസൈനിൽ, ഈ ലക്ഷ്യം നേടാനുള്ള ഒരു മാർഗ്ഗം (ഈ ലേഖനത്തിൽ ഞങ്ങൾ മറക്കുന്ന രീതി) ബ്ലോക്ക്ക്വോട്ട് എന്നു വിളിക്കുന്നു.

ലെവിസ് കരോളിനാൽ "ജബ്ബർവാക്കി" എന്ന വാക്കിൽ നിന്ന് നീണ്ട ഉദ്ധരണികൾ നിർവചിക്കാനായി ബ്ലോക്ക്ക്വോട്ട് ടാഗ് എങ്ങനെ ഉപയോഗിക്കുമെന്ന് നോക്കാം.

'താവ് ബ്രള്ളൈൻ ആൻഡ് സ്ലിത്തിക്കി ടോവുകൾ
നെയ്തെടുത്ത് ഗിയറും വിഭ്രാന്തരും ചെയ്തു:
എല്ലാ മിമിസിയും ബറോഗോകൾ,
ആട്ടിൻകുട്ടിയുടെ മുറ്റം വെട്ടിയിട്ടു.

(ലൂയിസ് കരോൾ)

ബ്ലോക്ക്ക്വോട്ട് ടാഗ് ഉപയോഗിച്ചുള്ള ഉദാഹരണം

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

നിങ്ങൾ അതിനെപ്പറ്റി ചിന്തിക്കുമ്പോൾ, പിൻകട്ട് വാചകത്തിന്റെ ഒരു ഉദ്ധരണി ആണ്, അത് വെറുതെ ഉദ്ധരിച്ച അതേ ലേഖനത്തിൽ തന്നെ സംഭവിക്കുന്നു.

മിക്ക വെബ് ബ്രൗസറുകളും ചുറ്റുമുള്ള വാചകത്തിൽ നിന്നും വ്യത്യസ്തമായി ബ്ളോക്ക് ക്വോട്ടിന്റെ ഇരുവശങ്ങളിലേക്കും ചില ഇൻഡെന്റ് ചെയ്യുന്നു (5 സ്പെയ്സുകൾ) ചേർക്കുക. ചില പഴയ ബ്രൗസറുകൾ ഉദ്ധരിച്ച പാഠം ഇറ്റാലിക്സിൽ നൽകും.

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

നിങ്ങളുടെ ടെക്സ്റ്റിലേക്കുള്ള ബ്ലോക്ക്ക്വോട്ട് ടാഗ് ചേർക്കുന്നതിന്, ഇനി പറയുന്ന ടാഗ് ജോടിയുള്ള ഒരു ഉദ്ധരണിയാകുമ്പോൾ,

ഉദാഹരണത്തിന്:

'താവ് ബ്രള്ളൈൻ ആൻഡ് സ്ലിത്തിക്കി ടോവുകൾ

നെയ്തെടുത്ത് ഗിയറും വിഭ്രാന്തരും ചെയ്തു:

എല്ലാ മിമിസിയും ബറോഗോകൾ,

ആട്ടിൻകുട്ടിയുടെ മുറ്റം വെട്ടിയിട്ടു.

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

ഇൻഡെന്റ് വാചകത്തിലേക്ക് ബ്ലോക്ക്ക്വോട്ട് ഉപയോഗിക്കരുത്

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

ഇത് ഇൻഡന്റ് ചെയ്ത ടെക്സ്റ്റ് ആയിരിക്കും.

അടുത്തതായി നിങ്ങൾ ആ ക്ലാസിനെ ഒരു CSS രീതി ഉപയോഗിച്ച് ടാർഗെറ്റ് ചെയ്യുന്നു

.indented {
പാഡിംഗ്: 0 10px;
}

ഇത് പാരാസിന്റെ ഇരുവശങ്ങളിലേക്കും പാഡിങ്ങിന്റെ 10 പിക്സലുകൾ ചേർക്കുന്നു.

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 5/8/17 ന്.