మీరు ఎప్పుడైనా HTML మూలకాల జాబితాలో చూసి ఉంటే, మీరే "బ్లాక్కోట్ అంటే ఏమిటి?" బ్లాక్కోట్ ఎలిమెంట్ అనేది ఒక దీర్ఘకాలిక ఉల్లేఖనాలను నిర్వచించడానికి ఉపయోగించే ఒక HTML ట్యాగ్ జత. W3C HTML5 స్పెసిఫికేషన్ ప్రకారం ఈ ఎలిమెంట్ యొక్క నిర్వచనం ఇక్కడ ఉంది:
Blockquote మూలకం మరొక మూలం నుండి ఉదహరించబడిన ఒక విభాగాన్ని సూచిస్తుంది.
మీ వెబ్ పేజీలలో బ్లాక్కోట్ ఎలా ఉపయోగించాలి
మీరు వెబ్ పేజీలో వచనం వ్రాస్తున్నప్పుడు మరియు ఆ పేజీ యొక్క లేఅవుట్ను సృష్టించినప్పుడు, మీరు కొంచెం టెక్స్ట్ యొక్క బ్లాక్ను కొటేషన్గా పిలుస్తారు.
ఇది కేస్ స్టడీ లేదా ప్రాజెక్ట్ విజేత కథతో పాటు కస్టమర్ టెస్టిమోనియల్ వంటి ఎక్కడా నుండి కోట్ కావచ్చు. ఇది కూడా వ్యాసం లేదా కంటెంట్ నుండి కొంత ముఖ్యమైన పాఠాన్ని పునరావృతమయ్యే ఒక నమూనా చికిత్సగా చెప్పవచ్చు. ప్రచురణలో, దీనిని కొన్నిసార్లు పుల్-కోట్ అని పిలుస్తారు, దీనిని వెబ్ డిజైన్లో, ఈ సాధించడానికి మార్గాలు (మరియు ఈ వ్యాసంలో మేము కవర్ చేస్తున్న మార్గం) ఒక బ్లాక్ కోట్ అంటారు.
కాబట్టి లూయిస్ కారోల్ ద్వారా "ది జబ్బర్వాకీ" నుండి ఈ ఎక్సెర్ప్ట్ వంటి దీర్ఘ ఉల్లేఖనాలను నిర్వచించడానికి బ్లాక్కోట్ ట్యాగ్ను ఎలా ఉపయోగించాలో చూద్దాం:
'ట్విస్ బ్రల్లిగ్ మరియు స్లిథీ టోవ్స్
గ్యారీ మరియు వ్యర్థం లో వ్యత్యాసం:
అన్ని mimsy borogoves ఉన్నాయి,
మరియు మమ్మీ రథాలు బాగున్నాయి.
(లూయిస్ కారోల్ చేత)
బ్లాక్కోట్ ట్యాగ్ ఉపయోగించి ఉదాహరణ
బ్లాక్కోట్ ట్యాగ్ అనేది ఒక సెమాంటిక్ ట్యాగ్, ఇది బ్రౌసర్ లేదా యూజర్ ఏజెంట్ను చెప్తుంది. అలాంటి, బ్లాక్కోట్ ట్యాగ్ లోపల ఉల్లేఖనకాని వచనం కాదు. గుర్తుంచుకో, "ఉల్లేఖన" అనేది ఒక బాహ్య మూలానికి చెందిన ఎవరైనా (ఈ కథనంలోని లూయిస్ కారోల్ వచనం వలె) ఎవరైనా చెప్పినట్లు లేదా టెక్స్ట్ చేసినట్లుగా తరచుగా ఉంటుంది. ఇది మేము ముందుగా కవర్ చేసే పుల్ కోట్ భావన.
మీరు దాని గురించి ఆలోచించినప్పుడు, పుల్ కోట్ టెక్స్ట్ యొక్క కోట్, అది కేవలం అదే వ్యాసం నుండి వస్తుంది, ఇది కోట్ కూడా కనిపిస్తుంది.
చాలా వెబ్ బ్రౌజర్లు చుట్టుపక్కల టెక్స్ట్ నుండి నిలబడటానికి ఒక బ్లాక్ కోట్ యొక్క రెండు వైపులా కొన్ని ఇన్డెంట్ (సుమారు 5 ఖాళీలు) జోడించండి. కొన్ని చాలా పాత బ్రౌజర్లు ఇటాలిక్లో కోటెడ్ టెక్స్ట్ను కూడా అందించవచ్చు.
ఇది కేవలం blockquote మూలకం యొక్క డిఫాల్ట్ స్టైలింగ్ అని గుర్తుంచుకోండి. CSS తో, మీ blockquote ఎలా ప్రదర్శించాలో మీరు మొత్తం నియంత్రణ ఉంటుంది. మీరు ఇండెంట్ను తీసివేయడం లేదా తొలగించడం, నేపథ్య రంగులను జోడించడం లేదా కోట్ను మరింత కాల్ చేయడానికి టెక్స్ట్ పరిమాణం పెంచడం వంటివి చేయవచ్చు. మీరు ఆ కోట్ను పేజీ యొక్క ఒక వైపుకు తేలుతూ, దాని చుట్టూ ఉన్న ఇతర వచనాన్ని కలిగి ఉండవచ్చు, ఇది ముద్రిత మ్యాగజైన్స్లో పుల్ కోట్లకు ఉపయోగించే ఒక సాధారణ దృశ్య శైలి. మీరు CSS తో blockquote రూపాన్ని నియంత్రణ కలిగి, ఏదో మేము కొంతకాలం చర్చించడానికి చేస్తుంది ఏదో. ఇప్పుడు కోసం, మీ HTML మార్కప్ కు కోట్ ను ఎలా జోడించాలో చూద్దాం.
మీ టెక్స్ట్కు బ్లాక్కోట్ ట్యాగ్ను జోడించడానికి, కింది ట్యాగ్ జతతో ఉల్లేఖన టెక్స్ట్ను కేవలం చుట్టూ -
ఉదాహరణకి:
'ట్విస్ బ్రల్లిగ్ మరియు స్లిథీ టోవ్స్
గ్యారీ మరియు వ్యర్థం లో వ్యత్యాసం:
అన్ని mimsy borogoves ఉన్నాయి,
మరియు మమ్మీ రథాలు బాగున్నాయి.
మీరు చూడగలవు, మీరు కోట్ యొక్క కంటెంట్ చుట్టూ బ్లాక్కోట్ ట్యాగ్లను జత చేస్తారు. ఈ ఉదాహరణలో, మేము కొంత బ్రేక్ ట్యాగ్లను కూడా ఉపయోగించాము (
) వచనం లోపలికి ఒకే లైన్ బ్రేక్లను జోడించడానికి. ఇది ఎందుకంటే మేము కవిత నుండి పాఠాన్ని పునఃసృష్టిస్తుంటాం, ఆ ప్రత్యేక విరామాలు ముఖ్యమైనవి. మీ కస్టమర్ టెస్టిమోనియల్ కోట్ సృష్టించడం, మరియు పంక్తులు నిర్దిష్ట భాగాలలో విచ్ఛిన్నం కానట్లయితే, మీరు ఈ బ్రేక్ ట్యాగ్లను జోడించకూడదు మరియు స్క్రీన్ సైజు ఆధారంగా అవసరమయ్యేటట్లు బ్రౌజర్ను మూసివేయడానికి మరియు విచ్ఛిన్నం చేయడానికి అనుమతించకూడదు.
ఇండెంట్ టెక్స్ట్ కు కోట్ ఉపయోగించవద్దు
అనేక సంవత్సరాలు, ప్రజలు వారి వెబ్పేజీలో పాఠాన్ని ఇండెంట్ చేయాలని కోరుకుంటే బ్లాక్కోట్ ట్యాగ్ను ఉపయోగించారు, ఆ టెక్స్ట్ ఒక పుల్ కోట్ కానప్పటికీ. ఇది చెడ్డ పద్ధతి! మీరు దృశ్యపరమైన కారణాల కోసం బ్లాక్కోట్ యొక్క సెమాంటిక్స్ని మాత్రమే ఉపయోగించకూడదు. మీరు మీ టెక్స్ట్ ను ఇండెంట్ చేయవలసి వస్తే, మీరు స్టైల్ షీట్లను ఉపయోగించాలి, బ్లాక్కోట్ ట్యాగ్లు ఉపయోగించకూడదు (కోర్సు యొక్క, మీరు ఇండెంట్ చేయడానికి ప్రయత్నిస్తున్నది కోట్ అయితే!). మీరు ఒక ఇండెంట్ను జోడించడానికి కేవలం ప్రయత్నిస్తున్నట్లయితే మీ వెబ్ పేజీలో ఈ కోడ్ను పెట్టండి:
ఇది ఇండెంట్ చేయబడిన టెక్స్ట్.
తరువాత, మీరు ఆ తరగతిని CSS శైలితో లక్ష్యంగా చేసుకుంటాం
.మంచి {
padding: 0 10px;
}
ఇది పాడింగ్ యొక్క ఇరువైపులా పాడింగ్ యొక్క 10 పిక్సెలను జతచేస్తుంది.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ చేత 5/8/17 న సవరించబడింది.