ezilnila.ca
A Tamil web portal since 1997
யுத்தமில்லாத பூமி வேண்டும் logo

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

தேர்வு செய்ய வேண்டியவற்றில் ஒன்றை மட்டும் தேர்வு செய்ய ரேடியோ
பொத்தான் உதவினாலும் பட்டியல் நீளமாக இருந்தால் அது பயன் தராது. எனவே
"drop down" எனப்படும் 'தொங்கு பட்டியலை' பயன்படுத்த நேரிடும். இதில் ஒரு முதன்மை பட்டியும் ஒரு உறுப்புப் பட்டியும் உண்டு. இந்த உள்ளிடு வகை கொடுக்கப் பட்ட பட்டியலிலிருந்து தேர்வு செய்யப் படும் வகை என்பதைக்
குறிக்க <SELECT> என்ற பட்டியைப் ப்யன் படுத்த வேண்டும். NAME என்ற
பண்பில் நீங்கள் விரும்பிய பெயரைத் தரலாம். <SELECT> </SELECT>
சோடிகளுக்கிடையில் வருவது பட்டியலில் வரும் உர்ப்படிகளாகும். ஒவ்வொரு
உருப்படிகளையும் குறிக்க <OPTION> என்ற பட்டியைப் பயன்படுத்த வேண்டும்.
நான் Apple, Orange, Banana என்பவைகளைப் பட்டியலிட வேண்டுமானால்
அதை இவ்வாறு தரலாம்:

<SELECT NAME="Fruit">
<OPTION>Apple</OPTION>
<OPTION>Orange</OPTION>
<OPTION>Banana</OPTION>
</SELECT>

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

இதில்,

NAME
ROWS
COLS
WRAP – (off, virtual, physical)
READONLY

என்ற பண்புகள் அடக்கம். எடுத்துக்காட்டாக, 30 எழுத்துக்கள் அகலமும்
மூன்றுவரிகளும் கொண்ட உரை வகை உள்ளீடு இப்படி அமையலாம்:

<TEXTAREA NAME="comment" ROWS="3" COLS="30"
WRAP="virtual">
</TEXTAREA>

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

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>
<FORM ACTION="mailto:csd_one@yahoo.com" METHOD="post"
enctype="text/plain">
Enter your name:<INPUT TYPE="Text" NAME="Name"
size="20"><p>
Favorite game:
<SELECT NAME="Interest">
<OPTION>Food ball</OPTION>
<OPTION>Cricket</OPTION>
<OPTION>Hocky</OPTION>
</SELECT>
<p>
Enter your notes here:<br>
<TEXTAREA NAME="Message" ROWS="5" COLS="40"
WRAP="virtual">
</TEXTAREA>
<p>
<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">
</FORM>
</BODY>
</HTML>

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

எடுத்துக் காட்டு: யாஹூ மின்னஞ்சல் பக்கம்.

இம்மாதிரியான அமைப்பு இரண்டு சட்டங்களைக்(frames) கொண்ட பக்கமாக
அமைக்கப் பட்டிருக்கின்றன. இரண்டு சட்டங்களும் ஒரே பக்கத்தில்
அமைந்திருந்தாலும் உண்மையில் இரண்டு பகுதிகளும் தனித்தனியான பக்கங்களே!
இந்த பக்கங்களை ஒரே இடத்தில் தோன்ற வைக்க உதவுவது <FRAMESET>,
<FRAME> ஆஇய பட்டிகளின் வேலையாகும்.

<FRAMESET> என்ற பட்டி, அந்தச் சட்டங்கள் திரையில் எப்படித் தோன்ற
வேண்டும் என்பதையும், <FRAME> என்ற துணைப் பட்டி அச்சட்டங்களில் என்ன
தோன்ற வேண்டும் என்பதையும் குறிக்கும்.

<FRAMESET> என்ற பட்டியில் கீழ்க் கண்ட பண்புகள் குறிக்கபடும்:
சட்டங்கள் இட, வலமாக இருக்க வேண்டுமானால் COLS (column)
என்பதாகவும், மேல் கீழாக இருக்க வேண்டுமானால் ROWS என்பதாகவும் குறிக்க
வேண்டும். மேலும் ஒவ்வொரு சட்டமும் எவ்வளவு படத் தனிமம்(pixel) அல்லது
திரையின் அளவில் எத்தனை வீதம் (%) இருக்க வேண்டும் என்பதையும்
குறிக்கவேண்டும். இவ்விரண்டில் திரையின் வீதத்தில் குறிப்பதே பாதுகாப்பான
வழியாகும். நீங்கள் எண்ணிய விளைவை ஒரேமாதிரியாக எல்லக் கணிகளிலும்
உருவாக்கும். எடுத்துக்காட்டாக, நீங்கள் உண்டாக்கும் சட்டப் பக்கம் திரையில்
சரி பாதியாகத் தெரிய வேண்டும் என்று எண்ணினால் இப்படித் தரலாம்:

<FRAMESET COLS="50%,50%"> (இட, வலம்)
<FRAMESET ROWS="50%,50%"> (மேல், கீழ்)
இம்மாதிரி எத்தனை பகுதிகளாகவும் பிரித்துக் கொள்ளலாம். மேலும், ஒரு
பகுதியை குறித்து விட்டு மீதியை அடுத்த சட்டத்திற்காக எனும் வகையில் '
* ' குறியிட்டு விடலாம்.

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

NAME (சட்டத்தின் பெயர்)
FRAMEBORDER (0-இல்லை, 1-உண்டு)
SCROLLING (yes, no auto)
NORESIZE(சட்டத்தின் அமைப்பை மாற்ற முடியாமை)

எடுத்துக் காட்டு:
<FRAME NAME="frame1" FRAMEBORDER="1" SCROLLING="auto">
இதில் NORESIZE என்று இட்டால் சட்டதின் அமைப்பை மாற்ற இயலாது.
NORESIZE இடாவிட்டால் அடிப்படையில் பயனர், சட்டத்தின் அமைப்பை
மாற்றும் வண்ணமே இருக்கும்.

கீழ்க் காணும் பட்டியல் ஒரு சட்டப் பக்கத்தை உருவாக்கும் மீயுரைமொழி
குறியீடுகளாகும். இதில் "mnulist" என்ற சிறிய சட்டமும் "instruct"
என்ற பெரிய சட்டமும் இருக்கின்றன. இவற்றில் முறையே "Menu.htm",
"Instruct.htm" ஆகிய பக்கங்கள் இணைக்கப் பட்டிருக்கின்றன.

Framepage.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>FrameDemo</title>
</head>
<frameset cols="20%,*">
<frame src="Menu.htm" scrolling="no" name="mnulist"
noresize target="_self">
<frame src="Instruct.htm" name="instruct"
scrolling="auto">
</frameset>
</html>

கீழ்க்காணும் இரண்டு பட்டியல்களும் சட்டப் பக்கத்தில் முறையே, இடது, வலது
புறங்களில் காணப் படுபவையாகும். இம்மூன்றையும் தனித் தனியே கொடுக்கப்
பட்டிருக்கும் பெயரில் சேமித்துக் கொள்ளவும். இம்மூன்றும் ஒரே இடத்தில்
(directory) சேமிக்கப் பட்டிருக்க வேண்டும். உலவியில்
framepage.htm என்பதைத் திறந்து பாருங்கள். இணைய இணைப்பு(internet
connection) இருக்கும்போது இடது புறம் இருக்கும் "Menu" வைச்
சொடுக்கிப் பாருங்கள். மூன்றையும் HTML கோப்புக்களாகச் சேமிப்பதில்
சிரமம் ஏற்பட்டால், இங்கே தட்டவும்:
http://www24.brinkster.com/umarthambi/html_try/framepage.htm

menu.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Menu</title>
</head>
<body text="#000000" bgcolor="#FFFF00">
<p>
<a target="instruct"
href="http://www24.brinkster.com/umarthambi/tamil/ETamil_search.asp">
1. Tamil Database</a></p>
<p><a target="instruct"
href="http://www.pathcom.com/~mahend">2. Mahen's Ezil
Nila</a></p>
<p><a target="instruct"
href="http://www.kalanjyam.5u.com/">3. Manju's
Kalanjyam</a></p>
</body>
</html>

instruct.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Click on the Menu Item</title>
</head>
<body>
<div align="center">
<center>
<table border="50" cellpadding="0" cellspacing="0"
width="365" height="289" id="AutoNumber1"
style="border-collapse: collapse">
<tr>
<td width="365" height="289" bgcolor="#C8C8C8">
<p align="center"><font size="6"
face="Verdana">Click on the Menu Item(left) to display
respective web pages</font></td>
</tr>
</table>
</center>
</div>
</body>
</html>

குறிப்பு:
வேலைப் பலுவின் காரணமாக ஒரு சிறு இடைவெளிக்குப் பின் இத்தொடர்
தொடர்கிறது.
இந்தப் பகுதியில் இடம் பெற்றிருக்கும் எடுத்துகாட்டுக்கள் IE4 அல்லது அதற்கு
மேலுள்ள உலவியில் செயல்படும். Netscape 4.7 இல் styles
தொழில்படுவதில்லை. Ver6 பயன்படுத்துபவர்கள் இதன் செயல்பாடுகளைக் காண
முடியும்.

இதுவரை, நாம் பார்த்து வந்த பகுதிகளில் உங்களது "இல்லப் பக்கம்"
எழுதுவதற்கேனும் உதவும் அடிப்படையான மீயுரைகுறிமொழி பட்டிகளைக்
கண்டோ ம். என்றாலும் அதற்கு மேலும் பக்கங்களுக்கு "துடிப்பூட்ட" பல வழிகள்
கையாளப் படுகின்றன. இவற்றிற்கு "script" எனப்படும் ஆணைத்
தொகுப்புக்கள் பெரிதும் உதவுகின்றன. HTML இல் மேம்பாடு செய்யப்பட்டதாக
Dynamic Hyper Text Markup Language எனப்படும் DHTML
உருவெடுத்தது. 'script' களில் காணப்படும் சில செயல்பாடுகளை தன்னகத்தே
கொண்டும் சில மெருகூட்டும் விளைவுகளைத் தரும்படியாகவும் செய்யபட்டுள்ளது.
இந்த இறுதிப் பகுதியின் நோக்கம், DHML பற்றியும் Script முழுமையாக
கற்றுத் த்ருவதல்ல என்றாலும் அவ்வாறான சிலவற்றைக் காண்பதும் மற்றும் உங்கள் பக்கங்கள் சிறக்க உதவும் வேறு சில விடயங்களைத் தருவதுமாகும்.

HTML படிவத்தில் உள்ள பல்வேறு அங்கங்களை தனித்தனியே அணுகி, அவற்றின்
பண்புகளை மாற்ற உதவும் DOM (document object model) எனப்படும் ஓர்
அமைப்பும் CSS(cascade style sheet) எனப்படும் ஓரமைப்பும் DHTML
இன் முக்கியமான அங்கங்களாகும்.

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

<html>
<body>

<H2 onmouseover="style.color='magenta'"
onmouseout="style.color='blue'">
Roll mouse over this text</H2>
This is an example for DHTML effect

</body>
</html>

இதில் onmouseover, onmouseout என்ற இரு நிகழ்வுகள்(events)
இருக்கின்றன. H2 என்ற அங்கத்தின் எழுத்துக்களை முறையே செந்நீல
வண்ணத்திலும், நீல வண்ணத்திலும் அமையுமாறு இவ்விரு நிகழ்வுகளும் தரும்.
'எலி' யை சொற்றொடர் மீது வைக்கும்போது "style.color='magenta'" என்ற ஆணை, அச்சொற்றொடரை செந்நீல வண்ணத்திற்கு மாற்றவும், 'எலி' யை சொற்றொடரை விட்டு விலக்கும்போது "style.color='blue" என்ற ஆணை சொற்றொடரை நீல வண்ணத்திற்கு மாற்றவும் உதவுகிறது. கவனத்தில் கொள்ளுங்கள்: மேற்கண்ட ஆணைகள் <H2> என்ற அங்கத்திற்கு மட்டுமே பொருந்துமாறு அந்த பட்டியினுள்ளேயே இடம்பெறிருக்கிறது.

கீழ்க்கண்ட வெவ்வேறான நிகழ்வுகளை தகுந்த இடங்களில் கையாண்டு தேவையான விளைவுகளைப் பெறலாம்.

இடப்புறத்தில் நிகழ்வின் குறியீடும் வலப் புறத்தில் அவை எப்போது நிகழும்
என்பதையும் காணலாம்:
onabort – User aborted page loading
onblur – User left the object
onchange – User changed the value of an object
onclick – User clicked on an object
ondblclick – User double clicked an object
onfocus – User made an object active
onkeydown – When a keyboard key is on its way down
onkeypress – When a keyboard key is pressed
onkeyup – When a keyboard key is released
onload – Page finished loading
onmousedown – User pressed a mouse-button
onmousemove – Cursor moving on an object
onmouseover – Cursor moved over an object
onmouseout – Cursor moved off an object
onmouseup – User released a pressed mouse-button
onreset User resets a form
onselect – User selected content of a page
onsubmit – User submitted a form

STYLE ஐ பயன்படுத்துவதன் மூலம் எவ்வாறு எளிதாக ஒரு பத்தியின் அல்லது
எழுத்துருவின் சிறப்புத் தன்மையை மாற்றலாம் என்று காண்போம்.

ஒரு நீண்ட பக்கத்தில் விதவிதமான எழுத்து அலங்காரங்களைக் கையாளும்போது ஒவ்வொரு இடத்திலும் எழுத்துருவின் பண்புகளைத் தர வேண்டியதிருக்கும். எடுத்துக் காட்டாக, தடித்த (bold) எழுத்துருக்கள் வரும் இடங்களிளை ஒரு குறிப்பிட்ட வண்ணத்தில் காட்ட வேண்டுமானால் <B> என்ற பட்டியை ஒவ்வோர் இடத்திலும் பயன்படுத்தி, எழுத்துருவின் வண்ணத்தையும் குறிக்க வேண்டும் என்று நாம் பார்த்திருக்கிறோம். style ஐ பாவித்தால் ஒரு வரியை மாற்றுவதன் மூலம் எளிதாகச் செய்துவிடலாம்.

<HTML>
<HEAD>
<STYLE type="text/css">
B {color:red}
</STYLE>
</HEAD>
<BODY>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want do
<b>changes</b> in your pages frequently.
</BODY>
<HTML>

மேற்கண்ட பகுதியை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
இல் ஒட்டி சோதனை செய்து பாருங்கள். எல்லா தடித்த(bold) எழுத்துக்களும்
சிவப்பு வண்ணத்தில் காணப் படும். அவற்றை நீல நிறத்தில் மாற்ற
வேண்டுமானால் B {color:red} என்பதில் red க்கு மாற்றாக blue ஐ
போட்டுவிட்டால் போதும் எல்லா எழுத்துக்களும் நீல வண்ணத்தில் மாறிவிடும்.
இம்மாதிரியே எழுத்துரு வகையையும்(font family) மாற்றிக் கொள்ளலாம்.
பத்திகளின் பின்னரங்கை மாற்றுவது, சுற்றுக்கோடிடுவது என்பவையும் சாத்தியம்.

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

<HTML>
<HEAD>
<STYLE type="text/css">
H2{text-align:center;border: medium double purple;}
B {color:red}
P {background-color: lime}
HR {color:magenta}
</STYLE>
</HEAD>
<BODY>
<H2>Example</h2>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want do
<b>changes</b> in your pages frequently.
<hr>
<P> This paragraph has yellow<br>
Background.</P>
</BODY>
<HTML>

STYLE களை மூன்று விதமாக பயன்படுத்தலாம். ஒன்று, எந்த இடத்தில்
தேவையான மாற்றங்கள் வேண்டுமோ அவ்விடத்திலேயே style பண்பைப்
பாவிப்பது. இரண்டு, ஆவணத்தின் தலைப் பகுதியில் <STYLE>
பட்டிகளுக்கிடையே குறிப்பது. மூன்று, style களை தனி கோப்பில்
கையாளுவது.

முதலிரண்டு வகைகளைக் கண்டோம். இனி, தனி கோப்பில் எவ்வாறு கையாளுவது
என்பதையும் அதன் பயன்பாடுகளையும் அடுத்த பகுதியில் காண்போம்.

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

ToTop