Bookmark and Share

పాఠమునకు రూపలావణ్యం చేకూర్చడం :: HTML కోడ్‌ను సుద్దపరచడం

 
ముందు పుట ... ౧౫ (15)
కూర్పు విధానము : HTML కోడ్  
 
బ్లాగర్ బ్లాగ్ పోస్ట్​ సృష్టించడానికి, కూర్పు విధానంలో, అక్షర రూప కల్పన ఐచ్ఛికలను లేక పరిఛ్చేధ రూప కల్పన ఐచ్ఛికలను పాఠానికి అనువర్తించడానికి, సాధనాల పట్టి మీద ప్రతిమ బొత్తాల రూపంలో వున్న సాధనాలను/పరికరాలను గాని, కుంచిక ఫలక లఘిష్టిలను గాని, వుపయోగించినప్పుడు పోస్ట్​ పాఠంలో కొంత Html కోడ్ చేర్చబడుతుంది. ఇది మీరు రూప లావణ్యం చేకూర్చడానికి ఐచ్చికలను కూర్పు లేక Html విధానాలలో ఎక్కడ చేసినా జరుగుతుంది.

• కోడ్ ఎక్కడ చేర్చబడుతుంది?

Html కోడ్, మీరు అక్షర ప్రదేశములో చేర్చే పాఠంలో భాగంగా చేర్చబడి, పాఠానికి మీరు ఎంచుకున్న రూప కల్పన ఐచ్ఛికలను అనువర్తించడానికి వుపయోగపడుతుంది. ఇలా చేర్చబడ్డ Html కోడ్ కూర్పు విధానంలో కనబడదు. ఆ కోడ్ చూడాలంటే మీరు Html విధానంలోకి మారవలసి వుంటుంది.

కొంత పాఠాన్ని ఎంచుకుని, ఎంపిక చేసిన పాఠానికి అనువర్తించడానికి, రూప కల్పన ఐచ్ఛికను ఎంచుకున్నట్లయితే, సంబంధిత Html మొదలు గుర్తు మీ ఎంపిక మొదట్లో మరియు Html అంతం గుర్తు మీ ఎంపిక చివరలో (ఎంపిక తరువాత) చేర్చబడతాయి. తద్వారా మీ ఎంపిక Html మొదలు, అంతం గుర్తుల మధ్యలో చేర్చినట్లవుతుంది.

మీరు రూప కల్పన ఐచ్ఛికలను ఎంచుకుని, తరువాత పాఠాన్ని చేర్చడం మొదలు పెట్టినట్లయితే

  • అక్షర పాఠ రూప కల్పన ఐచ్ఛికకు సంబంధించిన Html గుర్తులు, మీరు అక్షర ప్రదేశములో మొదటి అక్షరాన్ని చేర్చేవరకు చేర్చబడవు.
  • పరిఛ్చేధ రూప కల్పన ఐచ్ఛికకు (జాబితాలు, ఉల్లేఖన ఖండం) సంబంధించిన Html గుర్తులు, మీరు ఐచ్చికను ఎంచుకున్న వెంటనే, అక్షర ప్రదేశములో చేర్చబడతాయి.

పుట అంశాలు »  

అక్షర/చిహ్న రూప కల్పన ఐచ్ఛికలకు చేర్చబడే Html గుర్తులు/కోడ్  
 
అక్షర రూప కల్పన ఐచ్ఛికలకు అక్షర ప్రదేశంలో చేర్చబడే Html గుర్తులు/కోడ్.

• ప్రదేశము/పరిధి <span>

పరిధి (span) ఒక పంక్తి స్ధాయి Html అంశం (inline element). ఆ కారణంగానే పరిధి (span) ఒక వరుస/పంక్తి లో ఎక్కడయినా మొదలవ్వవచ్చు. ఇది పాఠానికి అక్షర/చిహ్న రూపలావణ్యం చేకూర్చడానికి బాగా ఉపకరిస్తుంది. పరిధి (span) గుర్తులను గూడు కట్టవచ్చు. అంటే ఒక పరిధి (span) లో భాగంగా (అంతర్భాగంగా) ఇంకొక పరిధి (span) చేర్చవచ్చు.

బ్లాగర్ ప్రోగ్రామ్ పరిధి (span) గుర్తును ఒకే చోట వరుసగా వుండి ఒకే రకమైన అక్షర/చిహ్న రూప కల్పన చేకూర్చవలసిన పాఠాన్ని కలిగివుండటానికి/పట్టివుంచడానికి వుపయోగిస్తుంది. కొంత పాఠాన్నిఎంపిక చేసి అక్షర/చిహ్న రూప కల్పన ఐచ్చికను ఎంచుకున్నట్లయితే బ్లాగర్ ప్రోగ్రామ్, మీ ఎంపిక మొదట్లో <span> గుర్తును, మీ ఎంపిక చివర్లో </span> గుర్తును చేరుస్తుంది.

పోస్ట్​లోని పాఠానికి రూప కల్పన చేకూర్చడానికి, బ్లాగర్ ప్రోగ్రామ్ పూర్తిగా "style" గుణాల మీద ఆధారపడుతుంది. అందువలన మీరు ఎంచుకున్న అక్షర/చిహ్న రూపలావణ్యాన్ని, మీరు ఎంపిక చేసిన పాఠానికి అనువర్తించడానికి, style గుణాన్ని, సంబంధిత లక్షణాలను జోడించి <span> మొదలు గుర్తులో భాగంగా చేరుస్తుంది.

పరిఛ్చేధ రూప కల్పన ఐచ్చికలకు చేర్చబడే Html గుర్తులు/కోడ్  
 
పరిఛ్చేధ రూప కల్పన ఐచ్చికలకు అక్షర ప్రదేశములో చేర్చబడే Html గుర్తులు/కోడ్.

• విభాగము <div>

విభాగము <div> దీర్ఘచతురస్ర ఆకారములో వున్న ఒక అదృశ్య పేటిక. ఈ Html అంశము, ఒక వెబ్ పుట ముఖ్య భాగం (body) లో వుండదగిన ఏ Html అంశాన్నయినా కలిగి వుండగలదు. ఒక విభాగము, వెబ్ పుట ముఖ్యభాగంలో వున్న (ప్రదర్శించబడే) మొత్తాన్ని కలిగి వుండగలిగినంత పెద్దదాని దగ్గరనుండి, కేవలం ఒక పరిఛ్చేధము మాత్రమే కలిగినంత చిన్నదాని వరకు రకరకాల పరిమాణాలలో కనపడుతుంది.

విభాగము ఒక ఖండ స్ధాయి Html అంశము (block level element). ప్రతి విభాగము ఒక క్రొత్త వరుస/పంక్తిలోనే మొదలవుతుంది. విభాగాలను కూడా గూడు కట్టవచ్చు. అంటే ఒక విభాగంలో అంతర్భాగంగా యింకొక విభాగాన్ని చేర్చవచ్చు.

విభాగాన్ని, బ్లాగర్ ప్రోగ్రామ్, ఒకే చోట వరుసగా వుండి, ఒకే రకమయిన పరిఛ్చేధ రూప కల్పన చేకూర్చవలసిన పాఠాన్ని, కలిపి వుంచడానికి వుపయోగిస్తుంది. కొంత పాఠాన్ని ఎంపిక చేసి పరిఛ్చేధ లీనానికి సంబంధించిన ఐచ్చికను ఎంచుకున్నట్లయితే, బ్లాగర్ ప్రోగ్రామ్, మీ ఎంపిక మొదట <div> గుర్తును, చివర్లో ఎంపిక తరువాత </div> గుర్తును చేరుస్తుంది. మీరు ఎంచుకున్న లక్షణాన్ని పరిఛ్చేధానికి అనువర్తించడానికి అవసరమైన style గుణాన్ని సంబంధిత లక్షణాలతో కలిపి విభాగపు మొదలు గుర్తు <div> లో భాగంగా చేరుస్తుంది.

• ఉల్లేఖన ఖండము <blockquote>

కొంత పాఠాన్ని ఎంచుకుని, block quote ప్రతిమ బొత్తం మీద క్లిక్ చేసినట్లయితే, మీ ఎంపిక మొదట్లో <blockquote> గుర్తు, చివర్లో, </blockquote> గుర్తు చేర్చబడతాయి.

ఎటువంటి పాఠాన్ని ఎంచుకోకుండా, block quote ప్రతిమ బొత్తం మీద క్లిక్ చేసినట్లయితే, మధ్యలో పాఠం ఏమీ లేకుండా, అక్షర ప్రదేశములో, <blockquote> </blockquote> గుర్తులు చేర్చబడతాయి. ఇలా చేర్చబడ్డ గుర్తులు, కూర్పు విధానంలో కనపడవు, Html విధానంలోకి మారితే, మద్య పాఠంలేకుండా వున్న ఈ గుర్తులను చూడవచ్చు. Html విధానంలోకి మారి ఈ గుర్తుల మధ్య (ఉల్లేఖన ఖండంలో భాగంగా చేర్చదలచిన) పాఠం ముద్రించవచ్చు.

• క్రమ జాబితా <ol>

మీరు కొంత పాఠాన్ని ఎంపిక చేసి "numbered list" ప్రతిమ బొత్తం మీద క్లిక్ చేసినట్లయితే, మీ ఎంపిక మొదట్లో <ol> Html గుర్తు, చివర్లో </ol> Html గుర్తు చేర్చబడతాయి. మీ ఎంపికలోని, Enter కుంచిక నొక్కడం ద్వారా విభజించబడ్డ పాఠ భాగానికి మొదట్లో <li> గుర్తు, చివర్లో </li> గుర్తు చేర్చబడతాయి.

ఎటువంటి గుణాలు గాని, లక్షణాలతో కూడిన style గుణంగాని చేర్చబడవు.

ఎటువంటి పాఠం ఎంపిక చేయకుండా "numbered list" ప్రతిమ బొత్తం మీద క్లిక్ చేసినట్లయితే, అక్షర ప్రదేశములో, మద్యలో పాఠం ఏమీ లేకుండా <ol><li></li></ol> గుర్తులు చేర్చబడతాయి. ఇలా చేర్చబడ్డ గుర్తులు, కూర్పు విధానంలో కనపడవు, Html విధానంలోకి మారితే, మద్య పాఠంలేకుండా వున్న ఈ గుర్తులను చూడవచ్చు. Html విధానంలోకి మారి ఈ గుర్తుల మధ్య (క్రమ జాబితాలో భాగంగా చేర్చదలచిన) పాఠం ముద్రించవచ్చు.

• తూటాల జాబితా <ul>

మీరు కొంత పాఠాన్ని ఎంపిక చేసి "Bulleted list" ప్రతిమ బొత్తం మీద క్లిక్ చేసినట్లయితే, మీ ఎంపిక మొదట్లో <ul> Html గుర్తు, చివర్లో </ul> Html గుర్తు చేర్చబడతాయి. మీ ఎంపికలో Enter కుంచిక నొక్కడం ద్వారా వేరు చేసిన పాఠ భాగానికి మొదట్లో <li>గుర్తు, చివర్లో </li> గుర్తు చేర్చబడతాయి.

ఎటువంటి గుణాలు గాని, లక్షణాలతో కూడిన style గుణంగాని చేర్చబడవు.

ఎటువంటి పాఠం ఎంపిక చేయకుండా "Bulleted list" ప్రతిమ బొత్తం మీద క్లిక్ చేసినట్లయితే, అక్షర ప్రదేశములో, మద్యలో పాఠం ఏమీ లేకుండా <ul><li></li></ul> గుర్తులు చేర్చబడతాయి. ఇలా చేర్చబడ్డ గుర్తులు, కూర్పు విధానంలో కనపడవు, Html విధానంలోకి మారితే, మద్య పాఠంలేకుండా వున్న ఈ గుర్తులను చూడవచ్చు. Html విధానంలోకి మారి ఈ గుర్తుల మధ్య (తూటాల జాబితాలో భాగంగా చేర్చదలచిన) పాఠం ముద్రించవచ్చు.

పుట అంశాలు »  

చేర్చబడ్డ Html కోడ్‌ను విశ్లేషించడం  
 
మీరు కూర్పు విధానంలో వుండి, అక్షర ప్రదేశంలో పాఠాన్ని చేర్చి, దానికి రూప కల్పన ఐచ్ఛికలను అనువర్తించిన తరువాత, Html విధానంలోకి మారినట్లయితే, మీరు చేర్చిన పాఠంలో కలసిపోయిన, జోడించబడ్డ/చేర్చబడ్డ Html కోడ్‌ను గమనించవచ్చు.

Html కోడ్‌ను అర్ధం చేసుకోడానికి, మీరు Html విధానంలో వున్నప్పుడు, అక్షర ప్రదేశంలోనుండి ఆ కోడ్ యొక్క నకలును తీసి (copy), ఒక సరికొత్త, నోట్‌పాడ్ ప్రోగ్రాం గవాక్షంలో అతికించండి.

కోడ్‌ను మొదలు నుండి పరిగణించండి.

  • వరుసగా Html గుర్తులను గుర్తించండి.
  • ప్రతి గుర్తు (మొదలు/అంతం అన్నిటికి) మొదట్లో కర్సర్‌ను వుంచి Enter కుంచిక నొక్కండి
  • మరల గుర్తు చివరలో కర్సర్ వుంచి Enter కుంచిక నొక్కండి.

ప్రతి Html గుర్తు నిర్ధిష్ట పంక్తిలో కనపడుతుంది.

దీని వలన ప్రతి Html గుర్తు మీకు సరి అయిన అవగాహన కలుగచేస్తుంది. మీరు చేర్చిన పాఠం, దానిని చుట్టి వున్న Html గుర్తు యొక్క ప్రభావాన్ని స్పష్టంగా అర్ధం చేసుకోవడానికి పంక్తుల మద్య ఎడం సృష్టించండి.

• జాగ్రత్త:

ఇదే ప్రయత్నాన్ని మీరు పోస్ట్​ను కూర్చే అక్షర ప్రదేశంలో వుండి చెయ్యవద్దు. Html విధానంలో వున్నప్పుడు, మీరు Enter కుంచిక నొక్కినప్పుడు చేర్చబడే గుర్తులు, మీరు పోస్ట్​ను భద్రపరచినప్పుడు, అలాగే దాచిపెట్టబడతాయి. మీరు కూర్పు విధానంలోకి మారినా కూడా అవి అలాగే వుంటాయి. మీరు Enter కుంచిక గుర్తులను పంక్తి విరుపుల క్రింద మార్చే అమరికను అవును అని ఎంచుకున్నట్లైతే (సాధారణంగా అవుననే వుంటుంది), ప్రచురించబడ్డ మీ బ్లాగ్ పోస్ట్​లో, మీరు Enter కుంచిక నొక్కిన చోటల్లా ఒక పంక్తి ఖాళీ ప్రదర్శించబడుతుంది.

కోడ్‌ను సుద్దపరచడం  
 

• అనవసరమైన కోడ్‌ను తొలగించడం

» ఎటువంటి విధులు లేని కోడ్

Html మొదలు, అంతం గుర్తులు, ఒకదాని తరువాత ఒకటి వుండి, వాటి మద్య ఎటువంటి పాఠం లేకుండా వున్నట్లయితే, ఆ గుర్తులకు ఎటువంటి విధి లేనట్లే. వీటిని ఖచ్చితంగా తొలగించవచ్చు. [ఉదా: <div style="text-align:right;"> </div>]

» వెంట వెంటనే వుండే కోడ్

మీరు రెండు అంతకంటే ఎక్కువ రూపకల్పన ఐచ్ఛికలను ఒకే పాఠానికి వేరు వేరు సార్లు అనువర్తించి వుంటే (ఎక్కువగా అక్షర/చిహ్న రూపకల్పన ఐచ్ఛికలకు), మీరు ఐచ్ఛికను అనువర్తించిన ప్రతిసారి, ఎంచుకోబడ్డ తదుపరి రూపకల్పన ఐచ్ఛికకు సంబంధించిన style గుణాన్ని అప్పటికే వున్న కోడ్‌లో భాగంగా చేర్చడం బదులు కొత్త <span> గుర్తు (అక్షర/చిహ్న రూపకల్పన కొరకు), <div> గుర్తు (పరిచ్ఛేధ రూపకల్పన కోసం) సంబంధిత లక్షణాలు చేర్చబడి వున్న style గుణంతో సహా మీ పోస్ట్​ పాఠంలో చేర్చుతుంది.

ఇటువంటి కోడ్‌ను style లక్షణాలన్నింటిని ఒకే <span> లేక <div> గుర్తు లోపలికి తరలించడం ద్వారా తగ్గించవచ్చు. ఒకే style గుణం యొక్క విలువ క్రింద, అనేక లక్షణాలను నిర్వచించవచ్చు కాబట్టి, దీనికి అవకాశం ఏర్పడుతుంది.

[<span style="font-weight:bold;"> <span style="font-size:180%;">కొంతపాఠం</span></span>] ను
క్రింది విధంగా ఒకే <span> గుర్తులోకి మార్చవచ్చు.
[<span style="font-weight:bold; font-size:180%">కొంతపాఠం</span>]

అనవసరమైన కోడ్‌, మీ బ్లాగ్ పోస్ట్​ ఆకృతి/రూపలావణ్యం మీద ప్రభావం చూపకపోవచ్చు, కాని అది మీ బ్లాగ్ పోస్ట్​ను కలిగి వున్న వెబ్ పుట యొక్క ఫైల్ పరిమాణము అనవసరంగా పెరగడానికి దోహదపడుతుంది. ఎక్కువ బ్లాగ్ పోస్ట్​లు వున్న బ్లాగ్‌లలోను, పెద్ద పరిమాణమున్న పోస్ట్​లు వున్న బ్లాగ్‌ల విషయంలోనూ, యిది పరిగణలోకి తీసుకోవలసిన అంశమే

అనవసరమైన కోడ్‌ను తొలగించడం విషయంలో మీరు ఖచ్చితమైన ఆలోచన ఏర్పడలేదనుకుంటే కోడ్ తొలగించే ప్రయత్నం చేయకండి. తెలియక ఏదన్నా తొలగించకూడనిది తొలగిస్తే దాని ప్రభావం మీ బ్లాగ్ పోస్ట్​ ప్రదర్శించబడటం మీద వుంటుంది.

మొదట్లో కొంచెం గందరగోళంగా అనిపించినా, మీరు ఈ పని రెండు మూడు సార్లు చేస్తే, అలవాటు పడిపోతారు. మీ పోస్ట్​కు రూపలావణ్యం చేకూర్చడం కోసం పోస్ట్​ పాఠంలో భాగంగా చేర్చబడే Html కోడ్‌ను సుద్ది చేయడం తేలికగా చేయగలుగుతారు. Html/css గురించిన అవగాహన కలుగ చేసుకోవడానికి యిదొక మంచి మార్గం.

• జాగ్రత్త » Html మొదలు గుర్తులు తొలగించినప్పుడు అంతం గుర్తులు కూడా తొలగించాలి

Html గుర్తులను తొలగించడమంటే, మొదలు/అంతం గుర్తులు రెండింటిని తొలగించడం. ప్రతి మొదలు గుర్తుకు, బ్లాగర్ ప్రోగ్రామ్, ఒక అంతం గుర్తు కూడా చేరుస్తుంది. కాబట్టి మీరు ఒక గుర్తును అనవసరమనుకుని తొలగించేటప్పుడు, దానికి సంబంధంగా వున్న మొదలు, అంతం రెండు గుర్తులను తొలగించాల్సి వుంటుంది.

• ఇలా చేయడం సౌకర్యవంతంగా వుంటుందేమో!!

  • Html విధానానికి మారండి.
  • మీ పోస్ట్​లో భాగంగా కూర్చదలచిన అక్షర పాఠాన్ని (ఎటువంటి రూపలావణ్యం లేకుండా) అక్షర ప్రదేశంలో ముద్రించండి.
  • కూర్పు విధానానికి మారండి. మొదటి రూపలావణ్య ఐచ్చికాన్ని అనువర్తించండి.
  • Html విధానంలోకి మారండి. అనవసరమైన Html గుర్తులేమన్నా చేర్చబడ్డాయేమో గమనించండి, వుంటే అవి అనవసరమనుకుంటే వాటిని తొలగించండి.
  • కూర్పు విధానంలోకి మారి, మీరు అనుకున్న రూపలావణ్యం (మీరు తొలగించిన/సరిచేసిన కోడ్ వలన) ఏమన్నా మారిందేమో గమనించండి. మారినట్లయితే వెనక్కు వెళ్లి Html కోడ్ సరి చెయ్యండి.
  • అక్షర పాఠం మొత్తానికి రూపలావణ్యం చేకూర్చడానికి యిదే ప్రక్రియ చేపట్టండి.
అనువాదం :: నేర్పు జట్టు ఈ పుటకు ఆంగ్ల మూలం ... తరువాతి పుట ౧౭ (17)

పుట అంశాలు »  
Bookmark and Share

© All rights reserved.

♣ Site optimized for ♣ Internet Explorer 7 ♣ Firefox 2.0 and above