எழுதப் பழகுவோம் எச். ரி. எம். எல் – பகுதி 5

நாம் இதுவரை கற்றுக் கொண்டது ஒரு அடிப்படையான இணையப்பக்கம் எழுதும்
அளவுக்கு போதுமானது என்றாலும் இத்துறையின் ஒரு விளிம்பைத்தான்
தொட்டிருக்கிறோம். இந்த மீயுரைகுறிமொழியின் வளர்ச்சி மேலொங்கிப்
போய் பல கிளைகளாக வளர்ந்திருக்கிறது.இனி சில சிறிய விடயங்களைப் பார்ப்போம்:

நீங்கள் பக்கங்களை எழுதும்போது சிறியகுறிப்புக்களையும்(comments) உங்கள் வசதிக்காக கூடவே எழுத விரும்பலாம்.ஆனால் அவை உலவியில் தெரியாமல் இருக்க வேண்டுமல்லவா? அதற்கு கீழ்க்கண்டவாறு குறிக்க வேண்டும்:

<!– (உங்கள் குறிப்புக்கள் – your comments) –> என்று எழுதவேண்டும்.
<!–, –> இவற்றிற்கிடையே எது எழுதப் பட்டாலும் உலவி புறக்கணித்துவிடும்.

எழுத்துக்கள் இடமிருந்து வலமாகவோ அல்லது வலமிருந்து இடமாகவோ
ஊர்ந்த்து செல்வதைப் பார்த்திருப்பீர்கள். இதை IE பயனர் மட்டும் கண்டிருக்க
முடியும், காரணம் Netscape இந்த வசதியைத் தருவதில்லை.

இதன் பண்புகள்:
ALIGN= (LEFT, MIDDLE, BOTTOM)
BEHAVIOUR=(SCROLL,SLIDE,ALTERNATE)
BGCOLOR=(#000000 TO #FFFFFF)
DIRECTION=(LEFT,RIGHT)
HEIGHT=(PIXEL VALUE, %)
VSAPACE=(NUMBER)
LOOP=(NUMBER,INFINITE)
SCROLLAMOUNT=(NUMBER)
SCROLLDELAY(NUMBER)

கீழ்க் கண்டதை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற பக்கத்தில் ஒட்டி சோதித்துப் பாருங்கள்(IE பயனர் அதிட்டசாலிகள்!)

<HTML>
<BODY>
<Font size="+2">
<MARQUEE behavior="slide" direction="right"
bgcolor="#FF88FF"></font>
This Text is sliding to right once
</MARQUEE><p>
<MARQUEE behavior="scroll">
This Text is scrolling
</MARQUEE><p>
<MARQUEE behavior="alternate"bgcolor="#c0c0c0" >
This Text is Alternating
</MARQUEE><p>
<MARQUEE behavior="scroll" scrolldelay="300"
bgcolor="#ffff00">
This Text is scrolling slowly
</MARQUEE>
</HTML>
</BODY>

Netscape பயனர்களும் ஒரு அதிட்டத்தைப் பெற்றிருந்தனர்
(Ver 4.7 இல் இருந்தது. புதிய Ver6 இல் அது இல்லை). "சிமிட்டல்"தான் அது.
IE இல் அது கிடையாது.

இதை சோதித்துப் பாருங்கள்:

<HTML>
<BODY>
<BLINK>
<font color="#FF0000" size ="+3">
I am Blinking!
</font>
</BLINK>
</BODY>
</HTML>

ஒரு கொசுரு: சில நேரங்களில் வேறு பக்கத்திற்குரிய இணைப்பை(link to other page) தட்டும்போது புதிய சாளரத்தில்(window) அதைக் காண வேண்டிய தேவை ஏற்படலாம். அதற்கு இரண்டு வழிகள் இருக்கின்றன. ஒன்று, அந்த இணைப்பின் வலச் சொடுக்குச் செய்து, கிடைக்கும் பட்டியலில் "open in new window" என்பத்
தேர்ந்தெடுக்கலாம். இரண்டாவது அதைவிட எளிதானது. Shift ஐ அழுத்திக்
கொண்டு அந்த இணைப்பின் மேல் சொடுக்கினால் புதிய சாளரத்தில் அந்த
பக்கம் திறக்கும்.

குறிப்பு:
இந்த ஆக்கத்தில் கையாளப் படும் அறிவியல்/கணினி தமிழ்ச் சொற்களுக்கு
ஆங்கிலப் பதம் வேண்டுவோர் கீழ்க் கண்ட தரவுத் தளத்தில் பெற்றுக்
கொள்லலாம்:
http://www24.brinkster.com/umarthambi/tamil/etamil_search.asp

இந்த மூன்றாவது பகுதியில் மேலும் மேம்பட்ட சில பட்டிகளையும் கட்டளைகளையும்
பார்ப்போம். இவை உங்கள் பக்கத்தை மேலும் மெருகூட்ட உதவும்.

பல வலைத்தளங்களை காணும்போது படங்களின் மீது சொடுக்கினால் வேறு
பக்கங்களுக்கு அவை எடுத்துச் செல்வதைக் கண்டிருப்பீர்கள். இதை நாம் முன்பு வந்த
பகுதியில் பார்த்திருக்கிரோம். மேலும் ஒரே படத்தின் வெவ்வேறு பகுதிகளில் சொடுக்கினால் வெவ்வேறு பக்கங்களுக்குச் செல்வதையும் சில வலைத்
தளங்களில் அவதானித்திருப்பீர்கள். அது எப்படி முடிகிறது? இன்று அதைப்
பார்ப்போம்.

இந்த விளைவைப் பெறுவதற்கு நாம் முன்பே கண்ட <IMG> பட்டியுடன் மேலும் சில
புதிய பட்டிகளைக் கையாள வேண்டும். அவையாவன:

<MAP>
<AREA>

முதலில் நாம் கையாளப் போகும் படத்திற்கு <MAP> பட்டியில் ஒரு பெயர்
தரவேண்டும். நீங்கள் விரும்பிய பெயரைத் தரலாம். எடுத்துக் காட்டாக அது
இவ்வாறு இருக்கலாம்: <MAP name= "camera">.

இனி, <IMG> பட்டியில் usemap பண்பு மூலம் அதன் மீது இணைப்பு
இடங்களை(area for hyper links) வரையறுக்கப் பயன்படுத்தப் போகிறோம் என்பதைக் குறிக்க, usemap="#camera" என்பதைத் தரவேண்டும் (கவனிக்க:# அடையாளம் தேவையான ஒன்று). பின்னர் <AREA> என்பதில் நீங்கள் வரையறுக்கப் போகும் வடிவம் எத்தகையது என்றும் அவற்றின்
coordinates (தமிழாக்கம் தேவை) எவை என்பதையும் குறிக்க வேண்டும்.

எடுத்துக் காட்டாக ஒரு படத்தின் அளவு 270X200 படத்தனிமம் (pixel)
என்றிருந்தால், அந்தப் பரப்பிலிருந்து எம்மாதிரியான வடிவத்தில் எந்த
இடத்திலிருந்து வரையறுக்கப் போகிறீர்கள் என்று குறிக்க வேண்டும். வடிவங்கள்
மூன்று வகையாக குறிக்கப் படுகின்றன. செவ்வகம் (rect), வட்டம்(circle),
பலகோணம்(polygon) ஆகியனவாகும்.

எடுத்துக் காட்டாக, ஒரு செவ்வகம் என்றால் அதன் படத் தனிம இருப்பிடங்கள்
நாம் பயன்படுத்தும் படத்தில் எங்கெங்கு அமைந்திருக்கின்றன என்று இப்படி
குறிக்க வேண்டும்:

coords="112, 37, 158, 60"

இதில் 112 என்பது அந்த வடிவம் (எடுத்துக் காட்டு: செவ்வகம்) படத்தின் இடப்
புறத்திலிருந்து (x-axis) 112 வது தனிமப் புள்ளியில் தொடங்குகிறது
என்பதையும் 37 என்பது மேலிருந்து கீழ் (y-axis) புள்ளியில் தொடங்குகிறது என்பதையும், 158 என்பது இடப் புறத்திலிருந்து (x-axis) 158 புள்ளியில் முடிகிறது என்பதையும், 60 என்பது மலிருந்து கீழ் (y-axis) 60 புள்ளியில் முடிகிறது என்பதையும். குறிக்கிறது. அதாவது, 112, 37 என்பது, start x,y உம் 158, 60 என்பது end x,y உம் ஆகும்.

மேலும், அந்த வடிவத்தில் சொடுக்கினால் எந்த இணையப் பக்கத்தைத் திறக்க
வேண்டும் என்பதையும் குறிக்க வேண்டும். ஆக, <AREA> பட்டியினுள் shape,
coords, href என்ற மூன்று பண்புகளையும் தர வேண்டும். அது இப்படி அமையும்:
<AREA shape="rect" coords="112, 37, 158, 60"
href="flash.html">

வட்ட வடிவமாக இருந்தால் அதன் நடுப் புள்ளியின் படத்தனிம இடத்தையும் (x,y coordinates), ஆரத்தின் (radius) அளவையும் தரவேண்டும். அது இப்படி அமையும்:
<area shape="circle" coords="206, 109, 44
href="lens.html""> இதில் 206, 109 என்பது x, y ஆகவும் 44
என்பது ஆரமாகவும் அமையும்.

பல கோண வடிவமாக இருந்தால் இது இப்படி அமையும்:
<area shape="polygon" coords="87, 25, 114, 106, 116,
171, 50, 177, 44, 106, 53, 45 href="grip.html"">
இதில் ஒவ்வொரு சோடிகளும்(87,25 / 114,106 / ….) கோணங்களின்
முனைப் புள்ளிகளாக அமையும்.

கீழே காணும் எடுத்துக் காட்டை ஒரு HTML கோப்பாக சேமித்தோ அல்லது
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற தளத்தில் ஒட்டியோ அதன் விளைவைப் பாருங்கள். ஐயம் இருப்பின் அறியத்
தாருங்கள்.

<html>
<head>
<title>Maping image</title>
</head>
<body>
<h1>Camera Parts</h1>
Move your mouse on the picture. You will see "hand
pointer" where the corresponding pages are linked.
<p><MAP name="camera">
<img border="0"
src="http://www24.brinkster.com/umarthambi/html_try/camera.jpg"
usemap="#camera" width="270" height="200">
<area shape="rect" coords="112, 37, 158, 60"
href="http://www24.brinkster.com/umarthambi/html_try/flash.html"
alt="Flash page">
<area shape="circle" coords="206, 109, 44"
href="http://www24.brinkster.com/umarthambi/html_try/lens.html"
alt="Lense page">
<area shape="polygon" coords="87, 25, 114, 106, 116,
171, 50, 177, 44, 106, 53, 45"
href="http://www24.brinkster.com/umarthambi/html_try/grip.html"
alt="Grip page">
<area shape="polygon" coords="168, 32, 250, 42, 252,
62, 208, 51, 174, 58, 165, 57"
href="http://www24.brinkster.com/umarthambi/html_try/vfinder.html"
alt="View finder page">
</body>
</html>

உள்ளிடு படிவம்(Form)

இநணையப் பக்கங்கள் எழுதுவதில் அறிந்திருக்க வேண்டியவைகளில் ஒன்று
"படிவம்"(form) எழுதுதல். இணையத் தளங்களுச் செல்லும்போது உங்கள்
மின்னஞ்சலையும் உங்களைப் பற்றிய சிறு குறிப்புக்களையும் உள்ளிடுமாறு
அமைந்திருக்கும் அனேக உள்ளீடு படிவங்களைப் பார்த்திருப்பீர்கள். இதன்
பயன்பாடு தொழில் முறையில் அதிகம் என்றாலும் ஒரு சராசரி மீயுரை
குறிமொழி எழுதுபவருக்கு ஒரு சில நேரங்களில் மட்டும் பயன் தரும். இன்று
அப்படியொரு படிவத்தைத் தயாரிப்பது எவ்வாறென்று காணலாம்.

பயனர் பெயர், கடவுச் சொல் உள்ளிடும் சிறு படிவம் முதல் பயனர்களிடமிருந்து
உள்ளீடுகளைப் பெற்று அவற்றிற்கேற்ப தகவல்களைத் தர உதவும் சிக்கலான வகை
வரை பல உண்டு. முதலில் எளிமையான ஒன்றிலிருந்து துவங்குவோம்.

உள்ளிடும் படிவத் தொடக்கம் என்பதை குறியிட <FORM> என்ற பட்டியைத்
தரவேண்டும். இதில் ACTION, METHOD, TARGET என்ற பண்புகள்
குறிபிடத்தக்கவை. இந்த படிவத்தில் உள்ளீடு செய்வதற்கென கையாளப்படும்
<INPUT> பட்டியில் கீழ்க்கண்ட வெவ்வேறான பண்புகள் கொண்ட உறுப்புக்கள்
அமைந்துள்ளன இவைகளில் குறிப்பிடத்தக்கவை:

TEXT
PASSWORD
CHECKBOX
RADIO
SUBMIT
RESET
BUTTON

இவையன்றி, பட்டியலிடப் பட்டவையிலிருந்து தேர்வு செய்யும்படியான(drop
down list)அமைப்புக் கொண்ட <SELECT> பட்டியும், பல வரிச்
செய்திகளை உள்ளிட <TEXTAREA> என்ற பட்டியும் பயன்படுத்தப் படுகின்றன.
முதலில் மிக எளிமையான ஒரு உள்ளிடும் படிவத்தைக் காண்போம்:

HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD>
<BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form.asp"
METHOD="post">
Enter your name here:
<INPUT TYPE="Text" NAME="mytext" size="20">
<INPUT TYPE="Submit" VALUE="Send Form">
</FORM>

</BODY>
</HTML>

மேற்கண்ட<FORM> பட்டியினுள் காணப் படும் ACTION என்ற பண்பு, இந்த
படிவத்தை புரவலருக்கு(server) அனுப்பும்போது என்ன செய்ய வேண்டும் என்று
அறிவிப்பது. METHOD என்பது உள்ளீடுகளை புரவலருக்கு அளிக்கும்போது எந்த
விதத்தில் அளிக்கிறது என்பதைக் குறிப்பதாகும்.

அடுத்து காணப்படும் உள்ளிட உதவும் <INPUT> பட்டியில், நாம் பயன்படுத்தப்
போவது 'உரை'(text) வகையைச் சார்ந்தது என்பதையும் அதற்கு "mytext"
என்ற பெயரையும் இட்டிருக்கிறோம். அடுத்து வரும் உள்ளிடும் வகை "Submit"
எனப்படும் பொத்தானாகும். அந்த பொத்தான் மீது என்ன எழுதப் பட வேண்டும்
என்பதை VALUE பண்புமூலம் கொடுக்கிறோம். இங்கு "Send Form" என்று
கொடுத்திருக்கிறோம். உங்களுக்கு உகந்தநதைக் கொடுக்கலாம். மேற்கண்ட
பகுதியை வெட்டி,
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற பக்கத்தில் ஒட்டி, உள்ளிடும் இடத்தில் பெயரை இட்டு படிவத்டை அனுப்பி
விளைவைப் பாருங்கள்.

ஒன்றை நீங்கள் அவதானித்திருக்கலாம். படிவத்தை அனுப்பப் பயன்படும்
பொத்தான் வரைவடிவமாக(graphical) உலவியில் தோன்றினாலும்
<INPUT> பட்டியில் அப்படியொரு ஆணை இல்லை. ஆனால் TYPE="Submit"
என்பதை உலவி புரிந்து கொண்டு ஒரு பொத்தானை திரையில் தருகிறது. அது
மட்டுமல்ல, அது சொடுக்கப் படும்போது ஆணையையும் புரவலருக்கு அனுப்புகிறது.
இவ்வண்னமே படிவத்தின் ஓவ்வொரு உறுப்பும் வரை வடிவமாகத் தோன்றினாலும்
அவை எல்லாமே பட்டிகளின் துணையால் உருவாக்கப் படுகின்றன. இவற்றில் காணும்
மற்றொரு பொத்தான் வகை "Reset" எனப்படுவது. இது, படிவத்தை மீள்
நிலைக்கு(உள்ளீடுகளை அவை அனுப்பப் படும் முன் அழித்து) கொண்டுவர
உதவுகிறது. "Submit" பொத்தான் வரிக்குக் கீழே இந்த "Reset"
பொத்தான் வரியைச் சேர்த்து சோதிதுப் பாருங்கள்:

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD>
<BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form.asp"
METHOD="post">
Enter your name here:
<INPUT TYPE="Text" NAME="mytext" size="20">
<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">

</FORM>

</BODY>
</HTML>

இனி, வேறொரு உள்ளிடு வகையான வட்டமாக நடுவில் ஒரு புள்ளியுடன்
காணப்படும் "ரேடியோ" பொத்தான் பற்றிப் பார்ப்போம். (இதற்கு ரேடியோ
பொத்தான் என்று பெயர் வரக் காரணம், இதன் அமைப்பு, பழங்கால
வானொலிகளில் காணப்பட்ட ஒலிக் கட்டுபாட்டு குமிழின் வடிவை
ஒத்திருப்பதாலாகும்). இந்த உள்ளிடுவகையில் பல உறுப்பினர் இருந்தால்
ஏதாவது ஒன்றைத்தான் தேர்வு செய்ய இயலும். கீழ்க் கண்ட எடுத்துக் காட்டைப்
பாருங்கள்:

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form.asp"
Enter your name here:
<INPUT TYPE="Text" NAME="mytext" size="20"><p>
Select Colour to diplay:<br>
஠<INPUT TYPE="Radio" NAME= "color" VALUE="r">Red<br>
<INPUT TYPE="Radio" NAME="color"
VALUE="b">Blue<br></p>

<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">
<BR>
</FORM>

</BODY>
</HTML>

மேற்கண்ட எடுத்துக் காட்டில் உள்ளிடு வகை "Radio" என்பதாகவும், அதன்
பெயர் "color" என்ப்தாகவும் கொடுத்திருக்கிறோம். அவதானிக்க: இங்கு
இரண்டு "ரேடியோ" பொத்தான்களுக்கென இரண்டு வரிகள் இருகின்றன. இரண்டிலும்
பெயர்(NAME) "color" என்றே கொடுத்திருக்கிறோம். காரணம் இரண்டும்
வண்ணங்களை தேர்வு செய்ய பயன்படும் ஒரே குழுவைச்(group) சேர்ந்தவையாகும்.
ஆனால் இரண்டின் மதிப்புக்களும் r , b என வெவ்வேறாகக் கொடுக்கப்
பட்டுள்ளன. எனவே ஏதாவது ஒன்றைத்தான் தேர்வு செய்ய இயலும். மேலும்
இவற்றில் ஏதாவது ஒன்று தொடக்கத்திலேயே தேர்வு செய்யப் பட்டிருக்க
வேண்டுமானால் checked என்ற பண்பையும் அந்த பட்டியினுள் சேர்த்து விட்டால்
போதும்.

மேற்கண்ட பகுதியை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற தலத்தில் ஒட்டி விளைவைப் பாருங்கள். தேவையானால் மாற்றங்கள் செய்து
சோதித்துப் பாருங்கள்.

சென்ற முறை நிகழ்ந்த தவறைக் கண்டுபிடித்துவிட்டீர்களா?
<FORM> பட்டியின் முடிவு அடைப்புக் குறி (>) விடுபட்டுப் போய்விட்டது.
மேலும் METHOD பண்பும் குறிக்கப் படவில்லை.

Ckeck Box எனப்படும் சிறு சதுரப் பெட்டியினை சில படிவங்களில்
கண்டிருப்பீர்கள். இது, ஒன்று ஆம் அல்லது இல்லை என்பதைக் குறிக்கப் பயன்
படுகிறது. எடுத்துக் காட்டாக, தேனீர் வேண்டுமென்றால் அது இனிப்புடனா
என்பதைக் குறிக்க அச்சதுரப் பெட்டியில் குறியிட்டும், இனிப்பு இல்லாமல்
என்றால் குறியிடாமலும் இருக்கலாம். கீழ்க் கண்டதைப் பாருங்கள்:

<INPUT TYPE="checkbox" name="chkbox">With sugar

இதில் உள்ளிடு வகை "checkbox" என்று குறிப்பிட்டிருக்கிறோம்.
"chkbox" என்று பெயருமிட்டிருக்கிறோம். With sugar என்று எழுதப்
பட்டிருப்பது, சதுரப் பெட்டி குறியிடப் பட்டிருந்தால் "இனிப்பு வேண்டும்"
என்பதைக் குறிப்பதற்காக. புரவலர் இந்தக் குறியீட்டை அறிந்து கொண்டு
தேவையான செயலை ஆற்றும்.

பல நேரங்களில் பயனர் பெயரைம் கடவுச் சொல்லையும் உள்ளிடுமாறு கேட்கும்
படிவங்களைக் கண்டிருப்பீர்கள். கடவுச் சொல் உள்ளிடு புலம் (Password
Input Field) உரைப் புலம்(Text field) போலென்றாலும், பாதுகாப்புக்
கருதி உள்ளிடப்படும் கடவுச் சொல்லை பிறர் காணாமலிருக்க திரையில்
ஒவ்வொரு எழுத்தும் ஒரு குறியீடாகக் காட்டப் படும். இவ்விரண்டும் எவ்வாறு
செயல்படுகிறதென்று அறிய
கீழே காணும் பட்டியலை
http://www24.brinkster.com/umarthambi/html_try/view_result.html

என்ற தளத்தில் ஒட்டி சோதிதுப் பாருங்கள்:

HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form1.asp"
METHOD="post">
<pre>
Enter your name:<INPUT TYPE="Text" NAME="mytext"
size="20"><br>
Enter your password:<INPUT TYPE="password"
NAME="pword" size="20">
</pre>
<p><INPUT TYPE="checkbox" name="chkbox"
Value="Yes">Display Password>
</p>

<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">
<BR>
</FORM>

</BODY>
</HTML>

பகுதி 6 ற்குச் செல்ல..