കൂട്ടുകാരെ ഇന്നത്തെ വിഷയo കുറച്ചു css ഭാഷയെകുറിച്ചാണ് . ആദ്യത്തെ പാഠത്തിൽ HTML ഉപയോഗിച്ച് webpage ഉണ്ടാക്കി . ആ webpageനെ നമ്മളിപ്പോ കുറച്ചു മാറ്റം വരുത്താൻ പോവുകയാണ് .അതിനായി നമുക്ക് കംപുടർ റിന്റെ CSS ഭാഷ ഉപയോഗിക്കാം .
നമ്മൾ ആദ്യത്തെ പാഠഭാഗത്ത്‌ പഠിച്ച html code ഒരു NOTEPAD ഓപ്പണ്‍ ചെയട് അതിൽ ടൈപ്പ് ചെയ്യുക
ആ NOTEPAD പണ്ടത്തെ പോലെതന്നെ സേവ് ചെയുക, അപ്പൊ നേരത്തെ ഉണ്ടാക്കിയ index .html എന്ന മാറ്റി ഇപ്പൊ ഉണ്ടാക്കിയ വെബ്‌ പേജ് നമ്മുടെ demoweb എന്ന ഫോൾഡറിൽ സേവ് ചെയുക . മാറ്റങ്ങൾ വരുതുനതിനു മുന്ബ് ഒന്ന് ബ്രൌസർ റിൽ ഓപ്പണ്‍ ചെയ്ട് വെക്കുക അതിങ്ങനെ ആയിരിക്കും കാണുക
My first webpage
this is a paragraph
this letter is bold
ഈ വെബ്‌ പേജ്നെ നമുക്കൊന്ന് CSS ഭാഷ ഉപയോഗിച്ച് , sentenceസുകളെ അവയുടെ സ്ഥാനത്തു നിന്നും മാറ്റി കുറച്ചു കളർ ഒക്കെ നോക്കാം . ഈ ചെറിയ ഉദാഹരണത്തിൽ നിന്നുതന്നെ നിങ്ങൾക്ക് CSS എന്ന ഭാഷയുടെ ഉപയോഗം മനസിലാക്കാൻ സാധിക്കും . താഴെ ഞാൻ ടൈപ്പ് ചെയ്ദിരിക്കുനപൊലെ നിങ്ങളുടെ കോഡിൽ മാറ്റം വരുത്തുക .
<html>
<head>
<title></title>
</head>
<style>
h1{
text-align:center;
}
p{
color:red;
text-align:center;
}
b{
text-align:center;
}
</style>
<body>
<h1>MY FIRST WEB PAGE</h1>
<p>by- your name</p>
<p style="text-align:center;">This letter is bold</p>
</body>
ഇനി notepad സേവ് ചെയ്ട് ബ്രൌസർ icon ഓപ്പണ്‍ ചെയ്ദു നോക്കുക
ഇപ്പൊ എന്ടെങ്ങിലും വെത്യാസം ഉണ്ടോ .
<style>
h1{
text-align:center;
}
p{
color:red;
text-align:center;
}
</style>
ഈ CSS code നമ്മുടെ HTML കോഡിൽ ചെരതപ്പോഴാണ് ഇപ്പോഴുള്ള മാറ്റം സാദ്യമായത് .
ഇപ്പൊ മനസിലായില്ലേ CSS ഭാഷ ഉപയോഗിച്ച് നമ്മുടെ വെബ്‌ പേജ് നെ style ചെയുനതെന്ന് .അതോടൊപ്പം HTML and CSS ഭാഷകൾ തമ്മിലുള്ള വെത്യാസവും മനസിലായെന്നു വിജരിക്കുന്നു .
ഇതിൽ പ്രേത്യേഗം ശ്രെദ്ധിക്കുക
CSS ഭാഷ നമ്മുടെ HTML കോഡിൽ കുട്ടിചെർക്കൻ,നമുക്കറിയാം CSS എന്നത് style ചെയ്യിക്കാൻ ഉപയോഗിക്കുന്ന ഭാഷയാണെന്ന് അതുകൊണ്ട് അത് എഴുതാൻ തുടങ്ങുനത് <style > എന്ന സ്റ്റൈൽ tag ഉപയോഗിക്കണം CSS കോഡ് എഴുതിയതിനു ശേഷം style tag ഇന്റെ ക്ലോസിംഗ് ടാഗായ </style > ഉപയോഗിച്ച് CSS codeing end ചെയണം .
നിങ്ങൾ ശ്രെധിചിരികും ഞാൻ ഈ കോഡ് എവിടെയാണ് നമ്മുടെ പഴയ HTML കോഡിൽ Place ചെയ്തതെന്ന് HTML കോഡിന്റെ </head>ടാഗിന്റെയും <body > ടാഗിന്റെയും ഇടയിലാണ് താഴെ എഴുതിയ CSS കോഡ് place ചെയ്തത് .
<style>
h1{
text-align:center;
}
p{
color:red;
text-align:center;
}
</style>
ഇത്രയും വായിച്ചതിനു ശേഷം നിങ്ങൾ ഇത് പലവട്ടം സ്വന്തമായി ചെയ്ദുനൊക്കനം . ഇതുകുടെ ഉള്പെടുതുമ്പോൾ നമ്മുടെ പഴയ സ്റ്റൈൽ ഒന്നും ചെയ്യാത്ത വെബ്‌ പേജ്ൽ എന്തൊക്കെ മാറ്റം സംഭവിച്ചെന്നും .നിങ്ങൾക്ക് വേണമെങ്ങിൽ കളർ ഒക്കെ red എന്നുലതുമാറ്റി green എന്നോ gray യൊക്കെ ട്രൈ ചെയ്യവുനതാണ് .അതുപോലെ text -align : center മാറ്റി right എന്നൊക്കെ അക്കിനോക്കവുനതാണ് . :) . ഇനിമുതൽ ഞാൻ കോഡ് ഇതുപോലെ ഉള്പെടുതുമ്പോൾ നിങ്ങൾ ഇതുപോലെയൊക്കെ മാറ്റി തനിയെ കുറെ കാര്യങ്ങൾ പടികെണ്ടാതാണ് .
1,2 ,3 പഠങ്ങൾ ഞാൻ വിശധമായി എന്താണ് HTML , CSS ആൻഡ്‌ BROWSER എന്ന് നിങ്ങളെ പരിജയപെടുതിയതാണ് കാരണം ഇതുവയിക്കുന്ന ഭുരിഭാകം ആളുകളും ഇതിനെകുറിച്ച് അടിസ്ഥാന വിദ്യാഭ്യാസം ഇല്ലാത്തവരാണ് എന്നതുതന്നെ .
1 .HTML എന്നത് നമുക്ക് വെബ്‌ സൈറ്റിൽ ആവശ്യം വേണ്ട കാര്യങ്ങൾ ആഡ് ചെയുനതിനുള്ള ഭാഷയും
2. CSS നമുക്ക് വേണ്ട കാര്യങ്ങൾ ഭംഗിയായി സ്റ്റൈൽ ചെയുനതിനുള്ള ഭാഷയും
3.BROWSER എന്നത് HTML ആൻഡ്‌ CSS ഉപയോഗിച്ച് നമ്മൾ എഴുതുന്ന വെബ്‌ പ്രോഗ്രാമ്മിനെ മനസിലാക്കി നമുക്ക് നമ്മൾക്കുമുന്നിൽ അതിൽ പറഞ്ഞേക്കും പ്രകാരം കാണിച്ചുതരുന്ന ഒരു മദ്യമവും
ഇപ്പോ നമ്മൾ ഒരു വെബ്‌ പേജ് നിര്മിക്കുനതിനുള്ള അടിസ്ഥാന വിവരങ്ങൾ നേടിക്കഴിഞ്ഞു . എല്ലാവരും 1 ,2 ,3 പാഠങ്ങൾ നന്നായി മനസിലാക്കിയതിനു ശേഷം മാത്രം പിന്നിടുള്ള ഭാഗങ്ങളിലേക്ക് കടക്കുക .
വരും ഭാഗങ്ങളിൽ നമ്മൾ കുടുതൽ കോടിങ്ങിലേക്ക് കടക്കുനതാണ് .അവിടെ ഓരോ കോഡും ഞാൻ വിവരിച്ചയിരിക്കും പറയുക , ഇതിനെക്കുറിച്ച് അടിസ്ഥാന വിവരം ഉള്ളവർ ക്ഷമിക്കുക നമുക്ക് അടിസ്ഥാന അറിവ് ഇല്ലതവരെകുടെ നമ്മുടെ കൂടെ നടത്തേണ്ടതുണ്ട് . എല്ലാവർക്കും എല്ലാവിധ ആശoസകളും
നമ്മൾ ആദ്യത്തെ പാഠഭാഗത്ത്‌ പഠിച്ച html code ഒരു NOTEPAD ഓപ്പണ്‍ ചെയട് അതിൽ ടൈപ്പ് ചെയ്യുക
ആ NOTEPAD പണ്ടത്തെ പോലെതന്നെ സേവ് ചെയുക, അപ്പൊ നേരത്തെ ഉണ്ടാക്കിയ index .html എന്ന മാറ്റി ഇപ്പൊ ഉണ്ടാക്കിയ വെബ്‌ പേജ് നമ്മുടെ demoweb എന്ന ഫോൾഡറിൽ സേവ് ചെയുക . മാറ്റങ്ങൾ വരുതുനതിനു മുന്ബ് ഒന്ന് ബ്രൌസർ റിൽ ഓപ്പണ്‍ ചെയ്ട് വെക്കുക അതിങ്ങനെ ആയിരിക്കും കാണുക
My first webpage
this is a paragraph
this letter is bold
ഈ വെബ്‌ പേജ്നെ നമുക്കൊന്ന് CSS ഭാഷ ഉപയോഗിച്ച് , sentenceസുകളെ അവയുടെ സ്ഥാനത്തു നിന്നും മാറ്റി കുറച്ചു കളർ ഒക്കെ നോക്കാം . ഈ ചെറിയ ഉദാഹരണത്തിൽ നിന്നുതന്നെ നിങ്ങൾക്ക് CSS എന്ന ഭാഷയുടെ ഉപയോഗം മനസിലാക്കാൻ സാധിക്കും . താഴെ ഞാൻ ടൈപ്പ് ചെയ്ദിരിക്കുനപൊലെ നിങ്ങളുടെ കോഡിൽ മാറ്റം വരുത്തുക .
<html>
<head>
<title></title>
</head>
<style>
h1{
text-align:center;
}
p{
color:red;
text-align:center;
}
b{
text-align:center;
}
</style>
<body>
<h1>MY FIRST WEB PAGE</h1>
<p>by- your name</p>
<p style="text-align:center;">This letter is bold</p>
</body>
ഇനി notepad സേവ് ചെയ്ട് ബ്രൌസർ icon ഓപ്പണ്‍ ചെയ്ദു നോക്കുക
ഇപ്പൊ എന്ടെങ്ങിലും വെത്യാസം ഉണ്ടോ .
<style>
h1{
text-align:center;
}
p{
color:red;
text-align:center;
}
</style>
ഈ CSS code നമ്മുടെ HTML കോഡിൽ ചെരതപ്പോഴാണ് ഇപ്പോഴുള്ള മാറ്റം സാദ്യമായത് .
ഇപ്പൊ മനസിലായില്ലേ CSS ഭാഷ ഉപയോഗിച്ച് നമ്മുടെ വെബ്‌ പേജ് നെ style ചെയുനതെന്ന് .അതോടൊപ്പം HTML and CSS ഭാഷകൾ തമ്മിലുള്ള വെത്യാസവും മനസിലായെന്നു വിജരിക്കുന്നു .
ഇതിൽ പ്രേത്യേഗം ശ്രെദ്ധിക്കുക
CSS ഭാഷ നമ്മുടെ HTML കോഡിൽ കുട്ടിചെർക്കൻ,നമുക്കറിയാം CSS എന്നത് style ചെയ്യിക്കാൻ ഉപയോഗിക്കുന്ന ഭാഷയാണെന്ന് അതുകൊണ്ട് അത് എഴുതാൻ തുടങ്ങുനത് <style > എന്ന സ്റ്റൈൽ tag ഉപയോഗിക്കണം CSS കോഡ് എഴുതിയതിനു ശേഷം style tag ഇന്റെ ക്ലോസിംഗ് ടാഗായ </style > ഉപയോഗിച്ച് CSS codeing end ചെയണം .
നിങ്ങൾ ശ്രെധിചിരികും ഞാൻ ഈ കോഡ് എവിടെയാണ് നമ്മുടെ പഴയ HTML കോഡിൽ Place ചെയ്തതെന്ന് HTML കോഡിന്റെ </head>ടാഗിന്റെയും <body > ടാഗിന്റെയും ഇടയിലാണ് താഴെ എഴുതിയ CSS കോഡ് place ചെയ്തത് .
<style>
h1{
text-align:center;
}
p{
color:red;
text-align:center;
}
</style>
ഇത്രയും വായിച്ചതിനു ശേഷം നിങ്ങൾ ഇത് പലവട്ടം സ്വന്തമായി ചെയ്ദുനൊക്കനം . ഇതുകുടെ ഉള്പെടുതുമ്പോൾ നമ്മുടെ പഴയ സ്റ്റൈൽ ഒന്നും ചെയ്യാത്ത വെബ്‌ പേജ്ൽ എന്തൊക്കെ മാറ്റം സംഭവിച്ചെന്നും .നിങ്ങൾക്ക് വേണമെങ്ങിൽ കളർ ഒക്കെ red എന്നുലതുമാറ്റി green എന്നോ gray യൊക്കെ ട്രൈ ചെയ്യവുനതാണ് .അതുപോലെ text -align : center മാറ്റി right എന്നൊക്കെ അക്കിനോക്കവുനതാണ് . :) . ഇനിമുതൽ ഞാൻ കോഡ് ഇതുപോലെ ഉള്പെടുതുമ്പോൾ നിങ്ങൾ ഇതുപോലെയൊക്കെ മാറ്റി തനിയെ കുറെ കാര്യങ്ങൾ പടികെണ്ടാതാണ് .
1,2 ,3 പഠങ്ങൾ ഞാൻ വിശധമായി എന്താണ് HTML , CSS ആൻഡ്‌ BROWSER എന്ന് നിങ്ങളെ പരിജയപെടുതിയതാണ് കാരണം ഇതുവയിക്കുന്ന ഭുരിഭാകം ആളുകളും ഇതിനെകുറിച്ച് അടിസ്ഥാന വിദ്യാഭ്യാസം ഇല്ലാത്തവരാണ് എന്നതുതന്നെ .
1 .HTML എന്നത് നമുക്ക് വെബ്‌ സൈറ്റിൽ ആവശ്യം വേണ്ട കാര്യങ്ങൾ ആഡ് ചെയുനതിനുള്ള ഭാഷയും
2. CSS നമുക്ക് വേണ്ട കാര്യങ്ങൾ ഭംഗിയായി സ്റ്റൈൽ ചെയുനതിനുള്ള ഭാഷയും
3.BROWSER എന്നത് HTML ആൻഡ്‌ CSS ഉപയോഗിച്ച് നമ്മൾ എഴുതുന്ന വെബ്‌ പ്രോഗ്രാമ്മിനെ മനസിലാക്കി നമുക്ക് നമ്മൾക്കുമുന്നിൽ അതിൽ പറഞ്ഞേക്കും പ്രകാരം കാണിച്ചുതരുന്ന ഒരു മദ്യമവും
ഇപ്പോ നമ്മൾ ഒരു വെബ്‌ പേജ് നിര്മിക്കുനതിനുള്ള അടിസ്ഥാന വിവരങ്ങൾ നേടിക്കഴിഞ്ഞു . എല്ലാവരും 1 ,2 ,3 പാഠങ്ങൾ നന്നായി മനസിലാക്കിയതിനു ശേഷം മാത്രം പിന്നിടുള്ള ഭാഗങ്ങളിലേക്ക് കടക്കുക .
വരും ഭാഗങ്ങളിൽ നമ്മൾ കുടുതൽ കോടിങ്ങിലേക്ക് കടക്കുനതാണ് .അവിടെ ഓരോ കോഡും ഞാൻ വിവരിച്ചയിരിക്കും പറയുക , ഇതിനെക്കുറിച്ച് അടിസ്ഥാന വിവരം ഉള്ളവർ ക്ഷമിക്കുക നമുക്ക് അടിസ്ഥാന അറിവ് ഇല്ലതവരെകുടെ നമ്മുടെ കൂടെ നടത്തേണ്ടതുണ്ട് . എല്ലാവർക്കും എല്ലാവിധ ആശoസകളും
No comments:
Post a Comment