32. Std : X I.T Unit :7 നമുക്കൊരു വെബ് പേജ് നിര്‍മ്മിയ്ക്കാം

1.HTML ന്റെ പൂര്‍ണ്ണരൂപമെഴുതുക ?
ഹൈപ്പര്‍ ടെക്‍സ്റ്റ് മാര്‍ക്ക് അപ് ലാംഗ്വേജ്
2.എന്താണ് ടെക്‍സ്റ്റ് എഡിറ്ററുകള്‍ ?
നോട്ടുകുറിക്കുന്നതിനുമാത്രം പരിമിതമായ സൌകര്യങ്ങളുള്ള സോഫ്റ്റ്‌വെയറുകളാണ് ടെക്‍സ്റ്റ് എഡിറ്ററുകള്‍ .നോട്ട് പാഡ് - വിന്‍ഡോസിലേയും ജി- എഡിറ്റ് ലിനക്സിലേയും ടെക്‍സ്റ്റ് എഡിറ്ററുകളാണ് .
3.ജി -എഡിറ്റ് തുറക്കുന്നതെങ്ങനെ ?
Appications -->Accessories-->Text Editor . അപ്പോള്‍ Unsaved Document 1 എന്ന വിന്‍ഡോ തുറന്നുവരും.
4.ജി-എഡിറ്റില്‍ ടൈപ്പ് ചെയ്ത് ഫയലായി സേവ് ചെയ്യുന്നതെങ്ങനെ ? ഇങ്ങനെ ചെയ്ത html ഫയല്‍ ഓപ്പണ്‍ ചെയ്യുന്നതെങ്ങനെ ?
Appications -->Accessories-->Text Editor .എന്ന രീതിയില്‍ ജി- എഡിറ്റ് തുറക്കുക .താഴെ പറയുന്നവ അതേരീതിയില്‍ ജി- എഡിറ്റ് വിന്‍ഡോയില്‍ ടൈപ്പ് ചെയ്യുക .
< html> KNMVHS SCHOOL < /html> ശേഷം file--> Save As .അപ്പോള്‍ Save As ഡയലോഗ് ബോക്സ് പ്രത്യക്ഷപ്പെടും .അതില്‍ Name കോളത്തില്‍ School.html എന്ന് type ചെയ്യുക .Save Folder എന്നതില്‍ Desktop സെലക്ട് ചെയ്യുക . Save ബട്ടണ്‍ ക്ലിക്ക് ചെയ്യുക . ഇപ്പോള്‍ മുമ്പുണ്ടായിരുന്ന ജി-എഡിറ്റ് വിന്‍ഡോയുടെ title ല്‍ ബാറില്‍ School.html(~/Desktop)-gedit എന്ന പേര് വന്നതായി കാണാം . താഴെയുള്ള പാനലില്‍ വലത്തേ അറ്റത്ത് നാലുകള്ളികള്‍ കാ‍ണാം. ഇവയെ ‘വര്‍ക്ക്‍‌സ്പേസുകള്‍‘ (ഒന്ന് ,രണ്ട് ,മൂന്ന് ,നാല് എന്നിങ്ങനെ യഥാക്രമം)എന്നാണ് പറയുന്നത് . ഇപ്പോള്‍ നമ്മുടെ ജി-എഡിറ്റ് ഫയല്‍ കിടക്കുന്നത് ഒന്നാമത്തെ വര്‍ക്ക്‍‌സ്പേസിലാണ് . ( അതായത് നാം പ്രവര്‍ത്തിച്ചുകൊണ്ടിരിക്കുന്ന വിന്‍ഡോ ) . ഇനി നാം രണ്ടാമത്തെ വര്‍ക്ക്‍‌സ്പേസില്‍ ക്ലിക്ക് ചെയ്യുക .അപ്പോള്‍ നാം രണ്ടാമത്തെ വര്‍ക്ക്‍‌സ്പേസിലായി. Desktop ല്‍ School.html എന്ന ഐക്കണ്‍ കാണാം. ആ ഐക്കണ്‍ ഡബ്ബിള്‍ ക്ലിക്ക് ചെയ്ത് ഓപ്പണ്‍ ചെയ്യുക ( അല്ലെങ്കില്‍ Right Click ചെയ്ത് Open with "Mozilla Firefox" എന്നത് ക്ലിക്ക് ചെയ്താലും മതി. OR Application-->Internet-->Mozilla Firefox-->File- ->Open-->select the file -->Open) അപ്പോള്‍ Mozilla Firefox വിന്‍ഡോ തുറന്നുവരും . അതില്‍ KNMVHS SCHOOL എന്നത് തെളിഞ്ഞുകാണാം.
5.സേവ് ചെയ്ത ഒരു html ഫയലില്‍ മാറ്റം വരുത്തുന്നതെങ്ങനെ ?
( ഇനി നാം മുന്‍പ് ചെയ്തതിന്റെ ബാക്കിയാണ് ചെയ്യേണ്ടത് )
നാം വീണ്ടും താഴെയുള്ള പാനലിലെ (വലതുവശത്തെ) ഒന്നാമത്തെ വര്‍ക്ക്‍‌സ്പേസ് ക്ലിക്ക് ചെയ്യുക. അപ്പോള്‍ അവിടെ മുന്‍പത്തെ ജി-എഡിറ്റ് വിന്‍ഡോ കാണാം.< html> എന്ന ടാഗിനുശേഷം < b>< font size=16 color=red > എന്ന് Type ചെയ്യുക . (ടൈപ്പ് ചെയ്യുന്നത് < html> എന്ന ടാഗിനുശേഷവും KNMVHS SCHOOL എന്നതിന് ഇടയിലുമായിരിയ്ക്കണം ). KNMVHS SCHOOL എന്നതിനുശേഷം < /font>< /b>എന്നിങ്ങനെ ടൈപ്പ് ചെയ്യുക .അതിനുശേഷം file --> Save --> Click ചെയ്യുക . ഇനി, താഴെ പാനലിലെ വലതുവശത്തെ രണ്ടാമത്തെ വര്‍ക്ക്‍‌സ്പേസ് ക്ലിക്ക് ചെയ്യുക . അപ്പോള്‍ ,അവിടെ Mozilla Firefox വിന്‍ഡോ കാണാം .അതില്‍ View നു താഴെ നീലനിറത്തില്‍ കാണുന്ന ഐക്കണില്‍ പോയിന്റര്‍ കൊണ്ടുവരിക . അപ്പോള്‍ അവിടെ Reload എന്ന് തെളിഞ്ഞു കാണാം. ആ ഐക്കണില്‍ Click ചെയ്യുക .ഇപ്പോള്‍ ‘ KNMVHS SCHOOL ‘ എന്നത് -ചുവപ്പുനിറത്തില്‍, ബോള്‍ഡായി , വലുപ്പത്തില്‍- കാണാവുന്നതാണ് . ഇനി വീണ്ടും ഒന്നാമത്തെ വര്‍ക്ക്‍‌സ്പേസില്‍ എത്തിച്ചേരുക . അവിടെ < font size=16 color=red > എന്നതിനുപകരം < font size=5 color=blue> എന്നാക്കി മാ‍റ്റുക . അതിനുശേഷം , മുന്‍പത്തേതുപോലെ file --> Save --> Click ചെയ്യുക .ഇനി വീണ്ടും രണ്ടാമത്തെ വര്‍ക്ക്‍‌സ്പേസില്‍ പോയി Reload / Refesh ല്‍ Click ചെയ്യുക. അപ്പോള്‍ വരുത്തിയ മാറ്റങ്ങള്‍ നമുക്ക് കാണാവുന്നതാണ് .ഇതുപോലെ ഫോണ്ട് സൈസിലും ഫോണ്ട് കളറിലും മാറ്റങ്ങള്‍ വരുത്തി പരിശീലിക്കുക.
( നോട്ട് : Save ചെയ്ത html ഫയലില്‍ മാറ്റം വരുത്തുവാനായി Source File തുറക്കേണ്ടതുണ്ട് . Applications--> Accessories-->Text editor-->gedit window തുറന്നുവരും . File --> Open--> Select file --> Open.
gedit ഫയല്‍ വിന്‍ഡോ ഒരു വര്‍ക്ക്‍‌സ്പേസിലും html ഫയല്‍ മറ്റൊരു വര്‍ക്ക് ‌സ്പേസിലുമിട്ട് മാറ്റങ്ങള്‍ (Edit) വരുത്തുന്നത് നന്നായിരിയ്ക്കും )
6.സാധാരണ ഉപയോഗിക്കുന്ന html ടാഗുകള്‍, അവയുടെ ഉപയോഗങ്ങള്‍,ക്ലോസിംഗ് ടാഗുകള്‍ എന്നിവ വ്യക്തമാക്കുക
< html>-- വെബ്ബ് പേജ് തുടങ്ങാന്‍ -- < /html>
< head>-- ശീര്‍ഷകത്തിന് -- < /head>
< title>-- ടൈറ്റില്‍ കൊടുക്കാന്‍ -- < /title>
< body>- ഉള്ളടക്ക ഭാഗത്തിന് < /body>
< font size= 10>-- അക്ഷരങ്ങളുടെ വലുപ്പം 10 ആക്കാന്‍ < /font>
< font color=red> -- അക്ഷരങ്ങളുടെ നിറം ചുവപ്പ് ആക്കാന്‍ .< /font>
< font size=10 color=red> അക്ഷരങ്ങളുടെ വലുപ്പം 10 ആക്കാനും നിറം ചുവപ്പ് ആക്കാനും-- < /font>.
( ശ്രദ്ധിക്കുക : അക്ഷരങ്ങളുടെ നിറം മാറ്റുന്നതിന് 'colour ' എന്നല്ല മറിച്ച് ‘color' എന്നാണ് ഉപയോഗിയ്ക്കേണ്ടത് .)
< b> അക്ഷരങ്ങള്‍ ബോള്‍ഡ് ആക്കാന്‍ < /b>
< u> അക്ഷരങ്ങള്‍ക്ക് അടിവരയിടാന്‍ < /u>
< i> അക്ഷരങ്ങളെ ഇറ്റാലിക്സ് ആക്കാന്‍ < /i>
< p> പുതിയ ഖണ്ഡിക തുടങ്ങാന്‍ < /p>
< table> പട്ടിക തയ്യാറാക്കാന്‍ < /table>
< tr> പട്ടികയ്ക്കകത്ത് പുതിയ വരി തുടങ്ങാന്‍ < /tr>
< td> പട്ടികയ്ക്കകത്ത് പുതിയ നിര തുടങ്ങാന്‍ < /td>
< a href="file name "> link നല്‍കാന്‍ < /a>
< br/>-പുതിയ വരി തുടങ്ങാ‍ന്‍ - (ഇതിന് ക്ലോസിംഗ് ടാഗ് ഇല്ല; കാരണം അതിന്റെ ആവശ്യം ഇല്ലാത്തതിനാല്‍ )
7.ചിത്രം ഉള്‍പ്പെടുത്തുന്നതിനുള്ള ടാഗ് എന്തെന്നു വ്യക്തമാക്കുക?
ഒരു ചിത്രം ഉള്‍പ്പെടുത്തുന്നതിനുള്ള ടാഗ് < img> എന്നതാണ് .Image എന്നതു സൂചിപ്പിക്കാനാണ് < img> ഉപയോഗിക്കുന്നത്
< img src="name of the file">
സ്കൂളിന്റെ ചിത്രം ഉള്ള ഫയലിന്റെ പേര് school.png എന്നാണെങ്കില്‍ ഈ ചിത്രം ഉള്‍പ്പെടുത്താന്‍ < img src="school.png">< /img>എന്നെഴുതണം.പക്ഷെ, ചിത്രത്തിന് ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ലാത്തതിനാല്‍ < img src="school.png"/>
8.പട്ടിക ചേക്കുന്നതെങ്ങനെയെന്ന് വ്യക്തമാക്കുക ?
പട്ടിക തുടങ്ങുന്നതിനായി <table> എന്ന ടാഗാണ് ആദ്യം ചേര്‍ക്കേണ്ടത് .
പട്ടികയില്‍ വരി (row) , നിര(column) എന്നിങ്ങനെ രണ്ട ഭാഗങ്ങളുണ്ടല്ലോ .അതിനാല്‍ ടേബിളിനകത്ത് വരിതുടങ്ങാന്‍ < tr> എന്ന ടാഗ് ഉപയോഗിക്കുക . വരിയ്ക്കകത്ത് നിര തുടങ്ങാന്‍ < td> ടാഗ് ഉപയോഗിക്കുക .വീണ്ടും നിര വേണമെങ്കില്‍ < td> എന്ന ടാഗ് ചേര്‍ക്കുക . വേണ്ടെങ്കില്‍ < /td> , പിന്നെ നിര ക്ലോസ് ചെയ്യാന്‍ < /tr> ഉപയോഗിക്കുക .വീണ്ടും വരി വേണമെങ്കില്‍ < tr> എന്ന ടാഗ് ഉപയോഗിക്കുക .അതുപോലെ നിര വേണമെങ്കില്‍< td> ടാഗ് ഉപയോഗിക്കുക .വരി ക്ലോസ് ചെയ്യുവാന്‍ < /tr> എന്ന ടാഗും നിര ക്ലോസ് ചെയ്യാന്‍ < /td> എന്ന ടാഗുമാണ് ഉപയോഗിയ്ക്കേണ്ടത് . അതുപോലെ തന്നെ ആവശ്യമുള്ളത്ര വരിയ്ക്കും നിരയ്ക്കുമുള്ള ടാഗ് നിര്‍മ്മിച്ചുകഴിഞ്ഞല്‍ പട്ടിക ക്ലോസ് ചെയ്യണം . അതിന് < /table> ആണ് ഉപയോഗിയ്ക്കേണ്ടത് .
9.ശീര്‍ഷക ഭാഗത്തിന്റെ ഉപയോഗം വ്യക്തമാക്കുക ?
വെബ്ബ് പേജിലുള്ള പ്രധാനപ്പെട്ട വിവരങ്ങള്‍ ഉള്‍പ്പെടുത്തുന്ന ഭാഗമാണ് ശീര്‍ഷക ഭാഗം . ആ പേജ് കണ്ടെത്തുന്നതിന് സഹായകമായ വിവരങ്ങള്‍ ,ടൈറ്റില്‍ എന്നിവയെ പറ്റിയുള്ള വിവരങ്ങള്‍ ശീര്‍ഷകഭാഗത്താണ് ഉള്‍പ്പെടുത്തുന്നത് .
10.ടൈറ്റില്‍ എന്തെന്ന് വ്യക്തമാക്കുക ?
ബ്രൌസറിന്റെ ടൈറ്റില്‍ ബാറില്‍ ദൃശ്യമാകുന്ന പേരിനെയാണ് പേജിന്റെ ടൈറ്റില്‍ എന്നു വ്യക്തമാക്കുന്നത് . < title> എന്നു തുടങ്ങി അതിന്റെ ക്ലോസിംഗ് ടാഗ് ആയ < /title> വരെയുള്ള ടെക്‍സ്റ്റ് ആണ് ടൈറ്റില്‍ ബാറില്‍ കാണിക്കുക < html> < head>< title> My first webpage > < /title>< /head>< /body></body></html> ഇക്കാര്യം ഉള്‍പ്പെടുത്തി ഒരു വെബ്ബ് പേജ് തയ്യാറാക്കി നോക്കുക
11.എച്ച്.ടി.എം.എല്‍. പേജിലെ ലിങ്കുകള്‍ എന്താണ് ? അതിനുപയോഗിക്കുന്ന ടാഗുകള്‍ ഏതൊക്കെയാണ്? പേജുകളെ തമ്മില്‍ ബന്ധിപ്പിക്കുന്നതാണ് ലിങ്കുകള്‍ . ഇതിനായി < a> എന്ന ടാഗാണ് ഉപയോഗിക്കുന്നത് .ബന്ധിപ്പിയ്ക്കാനുപയോഗിക്കുന്ന ഫയലിന്റെ പേര് myschool.html എന്നാണെങ്കില്‍ < a href="myschool.html">എന്ന രീതിയിലാണ് മറ്റൊരു പേജില്‍ ഇത് ഉപയോഗിയ്ക്കേണ്ടത് . ഈ ടാഗ് ഉള്‍പ്പെടുത്തി ടൈപ്പ് ചെയ്ത് , സേവ് ചെയ്ത് ബ്രൌസര്‍ തുറന്നു നോക്കുമ്പോള്‍ സ്കൂളിന്റെ പേര് വ്യത്യസ്തമായ നിറത്തില്‍ അടിവരയോടുകൂടി കാണുന്നതാണ്. മൌസ് പോയിന്റര്‍ ഇതിനു മുകളില്‍ കൊണ്ടുവരുമ്പോള്‍ രൂപത്തിലാവുന്നു.ഇത് ഒരു ലിങ്കിനെയാണ് സൂചിപ്പിയ്ക്കുന്നത് . സ്കൂളിന്റെ പേരിനുമുകളില്‍ ക്ലിക്ക് ചെയ്യുമ്പോള്‍ സ്കൂളിന്റെ പേജ് ദൃശ്യമാകുന്നു.
12. html പേജില്‍ ഭംഗി കൂട്ടുവാനുള്ള തന്ത്രങ്ങള്‍ എന്തൊക്കെയെന്ന് വ്യക്തമാക്കുക ?
പേജില്‍ മഞ്ഞ നിറം (yellow ) പശ്ചാത്തലനിറം കൊടുക്കണമെങ്കില്‍ < body> എന്നത് < body bgcolor=yellow> എന്ന രൂപത്തില്‍ മാറ്റി എഴുതിയാല്‍ മതി. മഞ്ഞയ്ക്കു പകരം വേറെ നിറം കൊടുക്കണമെങ്കില്‍ ആ നിറത്തിന്റെ പേര് അവിടെ ടൈപ്പ് ചെയ്താല്‍ മതി.
പേജില്‍ നാം ടൈപ്പ് ചെയ്യുന്ന അക്ഷരങ്ങള്‍ ചലിയ്ക്കണമെങ്കില്‍ < marquee> എന്ന ടാഗാണ് ഉപയോഗിയ്ക്കേണ്ടത് . നമ്മുടെ html ഫയലില്‍ < /body>യ്ക്ക് മുമ്പായി < marquee> created by your name < /marquee> എന്ന് ചേര്‍ക്കുക .your name എന്നുള്ളിടത്ത് നിങ്ങളുടെ പേരാണ് ചേര്‍ക്കേണ്ടത് .ഇനി ,സേവ് ചെയ്ത് ബ്രൌസറില്‍ Reload ക്ലിക്ക് ചെയ്ത് നോക്കുമ്പോള്‍ 'Created by your name ' എന്ന് Text സ്ക്രീനിലൂടെ വലത്തുനിന്നും ഇടത്തോട്ട് ചലിക്കുന്നതായി കാണാം. ഇനി നമുക്ക് ഈ അക്ഷരങ്ങള്‍ ഇടത്തുനിന്നും വലത്തോട്ടേയ്ക്കായി ചലിപ്പിയ്ക്കണം. അതിനായി < marquee direction=right>created by your name < /marquee> എന്ന രൂപത്തില്‍ ടാഗില്‍ മാറ്റം വരുത്തുക . right എന്നതിനു പകരം up, down എന്നിവ ഉപയോഗിച്ച് പരിശീലനം നടത്തുക
For more details:
1.Window list ,Window selector, workspace swicher എന്നിവ താഴത്തെ പാനലില്‍ ഉണ്ടായിരിക്കുന്നത് നല്ലതാണ് .
2.Marquee ദിശ കൊടുക്കുന്ന വേഡ് എവിടെയ്ക്കാണോ അവിടേയ്ക്കാണ് അക്ഷരങ്ങള്‍ ചലിക്കുക
3.Marquee ഡിഫാള്‍ട്ട് ആയി Left ആണ്
4.ചിത്രത്തിന് നീളവും വീതിയും കൊടുക്കാം . < img src="file name" Height=200 width=500> എന്നിങ്ങനെ
5.താഴത്തെ പാനലില്‍ മിനിമൈസ് ചെയ്ത ഫയലില്‍ Right Click ചെയ്ത് എല്ലാ വര്‍ക്ക്‍‌‌സ്പേസിലും കാണുന്നതാക്കാനോ അല്ലെങ്കില്‍ ഒന്നില്‍നിന്ന് മറ്റൊന്നിലേയ്ക്ക് മാറ്റാനോ കഴിയും
6.< hr> ലൈന്‍ വരയ്ക്കാന്‍ .ലൈനിന് കളറും വിഡ്‌ത്തും നല്‍കാവുന്നതാണ്.