సెప్టెంబర్ 29, 2007

CSS తో వెబ్ పేజీల స్టైలింగ్ …

Posted in కూడలి, జల్లెడ, టెక్నాలజీ, CSS వద్ద 9:25 సా. ద్వారా Praveen Garlapati

వెబ్ పేజీలు కంటికింపుగా కనిపించడం దాని స్టైలింగ్ మీద ఆధార పడి ఉంటుంది. ఎంత చక్కని కంటెంటు మీ వెబ్ పేజీలలో ఉన్నా దానిని సరిగా స్టైల్ చెయ్యకపోతే ఎవరూ చూడరు. నేను ఇంతకు ముందు రాసిన యూజబిలిటీ వ్యాసంలో కొంత దీని మీద చెప్పాను.

ఇప్పుడు అసలు వెబ్ పేజీలకు స్టైలింగ్ ఎలా చేస్తారో నాకు తెలిసినంత వరకూ చెబుతాను.

HTML టాగ్స్ ద్వారా చేస్తుందని అందరికీ తెలుసు. అంటే ఒక <P> అనే టాగ్ వాడితే పారాగ్రాఫ్ అని, <br> అంటే లైన్ బ్రేక్ కోసమనీ, ఇలా తయారు చేసారు. వాటిని ఉపయోగించి మనం వెబ్ పేజీలను రాస్తాము. అది ఒక ఫ్లో లా ఉంటుంది. ఎలాగంటే ముందు <HTML> టాగ్ తో మొదలవుతుంది. తరువాత <HEAD> టాగ్, తరవాత <BODY> టాగ్ అలాగన్నమాట.

ఇక కొద్ది కొద్దిగా విహరిణులు విస్తరించేసరికి ఎవరికి వారు (అప్పట్లో నెట్‌స్కేప్, ఇంటర్నెట్ ఎక్స్‌ప్లోరర్) తమ సొంత టాగులని ఉపయోగించడం మొదలుపెట్టారు. అలా కంపాటిబిలిటీ లేకుండా పోయింది అన్నమాట విహరిణుల మధ్య. అప్పుడే స్టాండర్డైజేషన్ మొదలెట్టారు. W3C (World Wide Web Consortium) HTML కి సంబంధించిన స్పెసిఫికేషన్లను మెయింటెయిన్ చేస్తుంది. స్టైలింగ్ విధానాల కోసం దాని చేత మెయిటెయిన్ చెయ్యబడే విధానం CSS

CSS పలు విధాలుగా రాయవచ్చు (వికీ నుండి):

  • External Stylesheet
  • Inline Style
  • Embedded Style

External Stylesheets: దీని ద్వారా అయితే మన స్టైలింగ్ ఆప్షన్స్ అన్నిటినీ మన HTML డాక్యుమెంటు లో కాకుండా ఇంకో వేరే డాక్యుమెంటులో భద్రపరుస్తాము. ఆ డాక్యుమెంటు .css అనే ఎక్స్టెన్షన్ తో ఉంటుంది. అలా తయారయిన డాక్యుమెంటు ని HTML పేజీకి ఆపాదించవచ్చు.

ఉదా: మీ HTML పేజీ ఇలా ఉందనుకోండి

<html>
<head>
<title>Example Document</title>
</head>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

అది ఇలా కనిపిస్తుంది.

దానికే ఓ స్టైల్‌షీట్ రాసి ఈ కింది విధంగా ఆ HTML పేజీకి అనుసంధానిస్తే ఇలా కనబడుతుంది.

style.css

h1 {
color: 000066;
text-align: center;
}

body {
font-family: Arial, serif;
}

example.html

<html>
<head>
<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css”>
<title>Example Document</title>
</head>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

ఇలా ఇంకో ఫైలులో స్టైలుని రాయటం External Stylesheet విధానం అన్నమాట.

Embedded Style: మన స్టైలింగ్ ని HTML లోనే ఎంబెడ్ చెయ్యడం ఇంకో విధానం. అదెలా అంటే

<html>
<head>
<title>Example Document</title>
<style type=”text/css”>
h1 {
color: 000066;
text-align: center;
}

body {
font-family: Arial, serif
}
</style>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

పై విధంగా రాయవచ్చు.

Inline Style: ఇక మూడో విధానం స్టైలుని మన HTML ఎలిమెంటు తో పాటే ఉంచడం. అది ఈ కింది విధంగా

<html>
<head>
<title>Example Document</title>
</head>
<body style=”font-family: Arial, serif”>
<h1 style=”color: 000066; text-align: center;”>Example H1 Tag</h1>
</body>
</html>

పై మూడు విధాలలో మన సౌలభ్యాన్ని బట్టి వాడుకోవచ్చు.

ఒక వెబ్ పేజీ ని తగినట్టుగా డిజైన్ చెయ్యడం అంత సులభం కాదు. తగిన రంగులు, ఫాంటులు, టెక్స్ట్ సైజులు వాడకపోతే అసలు నప్పదు.

మనకు వివిధ బ్లాగు అగ్రిగేటర్లు ఉన్నాయి. అన్నిట్లోకీ మనం కూడలి నే ఎక్కువగా ఎందుకు వాడతాము. మంచి ఫీచర్లు ఒక కారణమయితే అంతకన్నా మంచి డిజైన్ అసలు కారణం. మంచి ఫీచర్లున్నా కానీ సరిగా డిజైన్ చెయ్యకపోతే దానిని వాడలేము.

ఇది చెప్ప్పినందుకు జల్లెడ వారికి కోపమొస్తే రావు గాక.

ఉదా: జల్లెడ ని తీసుకుంటే దాంట్లో కూడలి కంటే తొందరగా టపాలు ప్రత్యక్షమవుతాయి. చక్కగా శోధన అదీ కూడా ఉంచారు. అంతా బానే ఉంది కానీ ఆ పేజీ తెరవగానే నాకు దానిని వాడబుద్ధి కాదు. ఎందుకంటే అది అసలు కంటికింపుగా ఉండదు. మొదట్లో వారు ఓ సారి ఫీడ్‌బాక్ అడిగినప్పుడు సరి చెయ్యమని చెప్పినట్టు గుర్తు.

ఆ డిజైన్ వారికి నప్పినట్టు అనిపించవచ్చు. కానీ నాకు మాత్రం నచ్చలేదు. అందుకే నేను నా సొంత డిజైన్ తయారు చేసుకున్నాను దానికి, నా సొంత CSS ద్వారా. ఒక జిడ్డుకోతి స్క్రిప్టు ద్వారా దానిని జల్లెడ కి జతచేసాను. ఇప్పుడు నేను నాకు కావలసినట్టు వాడుకుంటున్నాను.

ముందు తరవాత పేజీల చిత్రాలు మీరు ఈ కింద చూడవచ్చు.

స్క్రిప్టు కావాలంటే ఇక్కడ నుండి దిగుమతి చేసుకోవచ్చు.

ఇక ముగించే ముందు నా అభిప్రాయం ఒకటి చెబుతా. మీరు వెబ్ పేజీలను డిజైన్ చేసేటప్పుడు ముద్దు మెథడాలజీ, అదే నండీ KISS (Keep It Simple and Stupid) ఫాలో అయితే మంచిది. స్టైలింగ్ చెయ్యాలని చెప్పి అతిగా రంగులు, హంగామా తగిలిస్తే మొదటికే మోసం వస్తుంది. చక్కని స్టైలింగుతో రాసి మాకు మరిన్ని మంచి వెబ్ పేజీలు ప్రసాదించండి 🙂

ప్రకటనలు

10 వ్యాఖ్యలు »

  1. Srinivas Ch said,

    ప్రవీణ్ గారు, అసలు ఎప్పటినుంచో అడుగుదాము అని అనుకుంటున్నాను, ఇన్నాళ్లకి సమయం వచ్చింది.
    అసలు ఇలా మనం రాసుకున్న కస్టం .js ఫైల్స్ ని మంటనక్కలో ఎలా ఉపయోగించుకోవాలి, అదే మన మంటనక్కలోని జిడ్డుకోతికి ఈ ఫైలుని ఎలా లింక్ చేయాలి.
    అసలు జిడ్డుకోతిని మనం ఎలా మనకు కావల్సిన విధంగా మార్చుకోవచ్చు, ఈ విషయాలన్నింటి మీద ఒక టపా విపులంగా రాయగలరు.
    చాలా చక్కని సాంకేతిక విషయాలు రాస్తున్నందుకు మీకు నెనర్లు..

  2. Srinivas Ch said,

    ప్రవీణ్ గారు, అసలు ఎప్పటినుంచో అడుగుదాము అని అనుకుంటున్నాను, ఇన్నాళ్లకి సమయం వచ్చింది.అసలు ఇలా మనం రాసుకున్న కస్టం .js ఫైల్స్ ని మంటనక్కలో ఎలా ఉపయోగించుకోవాలి, అదే మన మంటనక్కలోని జిడ్డుకోతికి ఈ ఫైలుని ఎలా లింక్ చేయాలి. అసలు జిడ్డుకోతిని మనం ఎలా మనకు కావల్సిన విధంగా మార్చుకోవచ్చు, ఈ విషయాలన్నింటి మీద ఒక టపా విపులంగా రాయగలరు.చాలా చక్కని సాంకేతిక విషయాలు రాస్తున్నందుకు మీకు నెనర్లు..

  3. ప్రవీణ్ గార్లపాటి said,

    srinivas గారు:
    మన జావాస్క్రిప్టు ని జిడ్డుకోతి కి జతచెయ్యడం చాలా ఈజీ. దీనికి మనకు కావలసిందల్లా ఆ జిడ్డుకోతి ఆడాన్ ఇన్స్టాల్ అయి ఉండడమే.
    తరవాత మీరు జత చెయ్యాలనుకున్న కస్టం జావాస్క్రిప్టుని scriptname.user.js అని దాచుకుంటే సరిపోతుంది.
    .user.js ఎక్స్టెన్షన్ ఉన్న స్క్రిప్టులను జిడ్డుకోతి తన స్క్రిప్టులుగా గుర్తిస్తుంది. ఆ స్క్రిప్టుని మీ మంటనక్కలో తెరుస్తే ఇన్స్టాల్ చెయ్యమని ఆప్షన్ వస్తుంది. అప్పుడు ఇన్స్టాల్ చేసుకోండి. అంతే.
    జిడ్డుకోతి ద్వారా జావాస్క్రిప్టు మాత్రమే కాదు, CSS మొదలయినవెన్నో మార్చుకోవచ్చు, జోడించవచ్చు. దీనికోసం ఓ మంచి పుస్తకం ఉంది ఉచితమే. అది చదవండి. (http://diveintogreasemonkey.org/)
    ఈ స్క్రిప్టుల కోసమనే ప్రత్యేకంగా ఓ సైటు కూడా ఉంది (http://userscripts.org/)
    ఇంతకు ముందు నేను రాసిన greasemonkey వ్యాసం కూడా చదవచ్చు మీకు ఆసక్తి ఉంటే.

  4. srinivas గారు:మన జావాస్క్రిప్టు ని జిడ్డుకోతి కి జతచెయ్యడం చాలా ఈజీ. దీనికి మనకు కావలసిందల్లా ఆ జిడ్డుకోతి ఆడాన్ ఇన్స్టాల్ అయి ఉండడమే.తరవాత మీరు జత చెయ్యాలనుకున్న కస్టం జావాస్క్రిప్టుని scriptname.user.js అని దాచుకుంటే సరిపోతుంది..user.js ఎక్స్టెన్షన్ ఉన్న స్క్రిప్టులను జిడ్డుకోతి తన స్క్రిప్టులుగా గుర్తిస్తుంది. ఆ స్క్రిప్టుని మీ మంటనక్కలో తెరుస్తే ఇన్స్టాల్ చెయ్యమని ఆప్షన్ వస్తుంది. అప్పుడు ఇన్స్టాల్ చేసుకోండి. అంతే.జిడ్డుకోతి ద్వారా జావాస్క్రిప్టు మాత్రమే కాదు, CSS మొదలయినవెన్నో మార్చుకోవచ్చు, జోడించవచ్చు. దీనికోసం ఓ మంచి పుస్తకం ఉంది ఉచితమే. అది చదవండి. (http://diveintogreasemonkey.org/)ఈ స్క్రిప్టుల కోసమనే ప్రత్యేకంగా ఓ సైటు కూడా ఉంది (http://userscripts.org/)ఇంతకు ముందు నేను రాసిన greasemonkey వ్యాసం కూడా చదవచ్చు మీకు ఆసక్తి ఉంటే.

  5. Srinivas Ch said,

    ప్రవీణ్ గారు..మీకు నెనర్లు. ఎన్నో రోజుల నుంచి జిడ్డుకోతి మీద కొంచం పని చేద్దామనుకున్నాను. ఇన్నాళ్లకు కుదిరింది. తప్పకుండా మీరు చెప్పిన పుస్తకం చదివి ఇంకా కొత్త విషయాలు తెలుసుకుంటాను.

  6. Srinivas Ch said,

    ప్రవీణ్ గారు..మీకు నెనర్లు. ఎన్నో రోజుల నుంచి జిడ్డుకోతి మీద కొంచం పని చేద్దామనుకున్నాను. ఇన్నాళ్లకు కుదిరింది. తప్పకుండా మీరు చెప్పిన పుస్తకం చదివి ఇంకా కొత్త విషయాలు తెలుసుకుంటాను.

  7. జాలయ్య said,

    ప్రవీణ్ గారు,

    జల్లెడ గురించి వ్రాసినందుకు నెనర్లు. దీనిలో మాకు కోపమొచ్చే విషయమేమి లేదండి. మీలాంటి వారు ఇలా అభిప్రాయాలను తెలియజేస్తుంటేనే కదా, మాకు జల్లెడ గురించి వాడుకర్లేమనుకుంటున్నారో తెలిసేది.

    జల్లెడ డిజైన్ బాగాలేదని మీతో పాటు ఇంకొందరు చెప్పారండి. ఈమద్య పని వత్తిడి ఎక్కువవడం వల్ల జల్లెడను మార్చడం కుదర లేదు. వీలయినంత త్వరలో దానిని మార్చడానికి ప్రయత్నిస్తాను. వీలయితే, రెండు మూడు stylesheets పెట్టి ఎవరికి నచ్చినది వారు ఎంచుకొనే ఏర్పాటు చేయాలని కూడా ఉంది.

    మీకు జల్లెడలో నచ్చని విషయాలను నిరభ్యంతంరంగా మీ బ్లాగు ద్వారా గాని, లేదా మరే విధంగానయినా తెలియజేస్తూండండి.

    -జాలయ్య.

  8. ప్రవీణ్ గారు,జల్లెడ గురించి వ్రాసినందుకు నెనర్లు. దీనిలో మాకు కోపమొచ్చే విషయమేమి లేదండి. మీలాంటి వారు ఇలా అభిప్రాయాలను తెలియజేస్తుంటేనే కదా, మాకు జల్లెడ గురించి వాడుకర్లేమనుకుంటున్నారో తెలిసేది.జల్లెడ డిజైన్ బాగాలేదని మీతో పాటు ఇంకొందరు చెప్పారండి. ఈమద్య పని వత్తిడి ఎక్కువవడం వల్ల జల్లెడను మార్చడం కుదర లేదు. వీలయినంత త్వరలో దానిని మార్చడానికి ప్రయత్నిస్తాను. వీలయితే, రెండు మూడు stylesheets పెట్టి ఎవరికి నచ్చినది వారు ఎంచుకొనే ఏర్పాటు చేయాలని కూడా ఉంది.మీకు జల్లెడలో నచ్చని విషయాలను నిరభ్యంతంరంగా మీ బ్లాగు ద్వారా గాని, లేదా మరే విధంగానయినా తెలియజేస్తూండండి.-జాలయ్య.

  9. ప్రవీణ్ గార్లపాటి said,

    srinivas గారు:
    ఆల్ ద బెస్టు…

    జాలయ్య గారు:
    సహృదయంతో విమర్శ స్వీకరించినందుకు కృతజ్ఞతలు. తొందర్లోనే మంచి మార్పులతో ముందుకొస్తారని ఆశిస్తున్నా…

  10. srinivas గారు: ఆల్ ద బెస్టు…జాలయ్య గారు:సహృదయంతో విమర్శ స్వీకరించినందుకు కృతజ్ఞతలు. తొందర్లోనే మంచి మార్పులతో ముందుకొస్తారని ఆశిస్తున్నా…


స్పందించండి

Fill in your details below or click an icon to log in:

వర్డ్‌ప్రెస్.కామ్ లోగో

You are commenting using your WordPress.com account. నిష్క్రమించు / మార్చు )

ట్విటర్ చిత్రం

You are commenting using your Twitter account. నిష్క్రమించు / మార్చు )

ఫేస్‌బుక్ చిత్రం

You are commenting using your Facebook account. నిష్క్రమించు / మార్చు )

గూగుల్+ చిత్రం

You are commenting using your Google+ account. నిష్క్రమించు / మార్చు )

Connecting to %s

%d bloggers like this: