CSS తో HTML లో ఖాళీలను మరియు భౌతిక విభజన సృష్టించండి
HTML లో మూలకాల సృష్టి మరియు అంశాల భౌతిక విభజనను సృష్టించడం ప్రారంభంలో వెబ్ డిజైనర్ కోసం అర్థం చేసుకోవడం కష్టం. దీనికి కారణం HTML "ఆస్తి పతనం" అని పిలువబడుతుంది. మీరు మీ HTML కోడ్లో 1 స్థలం లేదా 100 టైప్ చేస్తే, వెబ్ బ్రౌజర్ స్వయంచాలకంగా ఆ ఖాళీలు కూలిపోయి ఒకే స్థలంలోకి వస్తుంది. ఇది మైక్రోసాఫ్ట్ వర్డ్ వంటి కార్యక్రమం నుండి విభిన్నంగా ఉంటుంది, డాక్యుమెంట్ సృష్టికర్తలు వేర్వేరు పదాలను వేర్వేరు పదాలను మరియు ఆ పత్రంలోని వేర్వేరు అంశాలకు జోడించడానికి అనుమతిస్తుంది.
ఇది వెబ్సైట్ డిజైన్ అంతరం ఎలా పనిచేస్తుంది కాదు.
కాబట్టి, మీరు వెబ్ పేజీలో కనిపించే HTML లో తెల్ల ఖాళీలు ఎలా జోడించాలి? ఈ ఆర్టికల్లో కొన్ని రకాలున్నాయి.
CSS తో HTML లో ఖాళీలు
క్యాస్కేడింగ్ స్టైల్ షీట్స్ (CSS) తో మీ HTML లో స్పేస్లను జోడించడానికి ఇష్టపడే మార్గం. CSS వెబ్పేజీ యొక్క ఏదైనా దృశ్య అంశాలను జోడించడానికి వాడాలి, మరియు అంతరం అనేది పేజీ యొక్క దృశ్య రూపకల్పన లక్షణాల్లో భాగంగా ఉండటం వలన, మీరు చేయవలసిన చోట CSS ఎక్కడ ఉంది.
CSS లో, అంశాల చుట్టూ ఖాళీని జోడించడానికి మార్జిన్ లేదా పాడింగ్ లక్షణాలను ఉపయోగించవచ్చు. అదనంగా, టెక్స్ట్-ఇండెంట్ ఆస్తి టెక్స్ట్ ముందు భాగంలో ఖాళీలు జతచేస్తుంది.
ఇక్కడ మీ పేరాగ్రాఫ్ల ముందు ఖాళీని జోడించడానికి CSS ను ఎలా ఉపయోగించాలో ఒక ఉదాహరణ. మీ బాహ్య లేదా అంతర్గత శైలి షీట్లో క్రింది CSS ను జోడించండి:
p {
టెక్స్ట్-ఇండెంట్: 3 గంట;
}
HTML లో ఖాళీలు: మీ టెక్స్ట్ లోపల
మీరు మీ పాఠానికి ఒక అదనపు స్థలాన్ని లేదా రెండు భాగాన్ని జోడించాలనుకుంటే, మీరు బ్రేకింగ్ స్పేస్ని ఉపయోగించవచ్చు.
ఈ పాత్ర ఒక ప్రామాణిక స్పేస్ పాత్ర వలె పనిచేస్తుంది, ఇది బ్రౌజర్ లోపల కూలిపోదు.
టెక్స్ట్ యొక్క ఒక లైన్ లోపల ఐదు ఖాళీలు ఎలా జోడించాలో ఒక ఉదాహరణ:
ఈ టెక్స్ట్ లోపల ఐదు అదనపు ఖాళీలు ఉన్నాయి
HTML ను ఉపయోగిస్తుంది:
ఈ టెక్స్ట్ & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; లోపల ఐదు అదనపు ఖాళీలు
అదనపు లైన్ బ్రేక్లను చేర్చడానికి మీరు కూడా ట్యాగ్ను ఉపయోగించవచ్చు.
ఈ వాక్యం చివరికి ఐదు లైన్ బ్రేక్లను కలిగి ఉంది
ఎందుకు HTML లో అంతరం ఒక బాడ్ ఐడియా
ఈ ఐచ్ఛికాలు రెండూ పని చేస్తాయి - కాని బద్దలు లేని ఖాళీలు మూలకం మీ టెక్స్ట్కు ఖాళీని జోడించి, లైన్ బ్రేక్లు పైన చూపిన పేరా కింద అంతరాన్ని జోడిస్తాయి - ఇది మీ వెబ్పేజీలో అంతరాన్ని సృష్టించడం ఉత్తమ మార్గం కాదు. మీ HTML కు ఈ అంశాలను జోడించడం దృశ్య శైలుల (CSS) నుండి ఒక పేజీ యొక్క నిర్మాణం (HTML) ను వేరుచేయడానికి బదులుగా కోడ్కు దృశ్య సమాచారాన్ని జోడిస్తుంది. భవిష్యత్తులో మరియు మొత్తం ఫైలు పరిమాణాన్ని మరియు పేజీ పనితీరును మెరుగుపరచడం సహా అనేక కారణాల కోసం వీటిని వేరుచేయాలని ఉత్తమ విధానాలు నిర్దేశిస్తాయి.
మీరు అన్ని మీ శైలులు మరియు అంతరాన్ని ఖరారు చేయడానికి ఒక బాహ్య శైలి షీట్ను ఉపయోగిస్తే, మొత్తం సైట్ కోసం ఆ శైలులను మార్చడం సులభం, ఎందుకంటే మీరు కేవలం ఒక శైలి షీట్ను అప్డేట్ చేయాలి.
వాక్యమునకు పైన ఉన్న ఐదు ఉదాహరణల చివర ఉన్న ఉదాహరణను పరిశీలించండి. మీరు ప్రతి పేరా దిగువ భాగంలో అంతరాన్ని కోరుకుంటే, మీ మొత్తం సైట్లోని ప్రతి పేరాకి మీరు HTML కోడ్ను జోడించాలి. ఇది అదనపు మార్కప్ యొక్క సరసమైన మొత్తం మీ పేజీలను ఉబ్బినట్లు చేస్తుంది.
అదనంగా, మీరు ఈ అంతరాన్ని చాలా ఎక్కువ లేదా చాలా తక్కువగా నిర్ణయించినట్లయితే, మరియు మీరు దానిని కొంచెం మార్చుకోవాలనుకుంటే, మీ మొత్తం వెబ్సైట్లో ప్రతి పేరాని మీరు సవరించాలి. అక్కర్లేదు!
బదులుగా ఈ కోడ్ను మీ కోడ్కు జోడించడం, CSS ను ఉపయోగించండి.
p {
padding-bottom: 20 px;
}
CSS యొక్క ఒక లైన్ మీ పేజీ యొక్క పేరా కింద అంతరం జోడిస్తుంది. భవిష్యత్తులో ఆ ఖాళీని మార్చాలని మీరు కోరుకుంటే, ఈ లైన్ను (మీ మొత్తం సైట్ కోడ్కు బదులుగా) సవరించండి మరియు మీరు వెళ్ళడానికి బాగుంటుంది!
ఇప్పుడు, మీరు మీ వెబ్ సైట్ యొక్క ఒక భాగం లో ఒక ఖాళీని జోడించడానికి, ఒక
ట్యాగ్ లేదా ఒక బ్రేకింగ్ స్పేస్ ఉపయోగించి ప్రపంచంలోని ముగింపు కాదు, కానీ మీరు జాగ్రత్తగా ఉండాలి.
ఈ ఇన్లైన్ HTML అంతరాన్ని ఎంపికలు ఉపయోగించి ఒక స్లిప్పరి వాలు ఉంటుంది. ఒకటి లేదా రెండు మీ సైట్కు హాని చేయకపోయినా, మీరు ఆ మార్గాన్ని కొనసాగితే, మీరు మీ పేజీలలో సమస్యలను ప్రవేశపెడతారు. చివరికి, మీరు HTML అంతరాన్ని మరియు అన్ని ఇతర వెబ్పేజ్ దృశ్యమాన అవసరాలకు CSS కు తిరుగుతుంటూ ఉంటారు.