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

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

STYLE (பாணி?) ஐ மூன்று விதமாக கையாளலாம் என்று பார்த்தோம். இதில்
மூன்றாவது, style sheet ஐ தனி கோப்பில் எழுதி, மீயுரை படிவத்தில்
அதைப் பயன்படுத்திக் கொள்ளுமாறு செய்வதாகும். நாம் முன்னமே கண்ட அதே
எடுத்துக் காட்டை மீண்டும் காண்போம். அதில் <STYLE> பட்டிகளுக்கிடையில்
காணப்படும் குறியீடுகள், எந்தெந்தப் பகுதி எம்மாதிரியாக உலவியில்
காட்சி தர வேண்டும் என்று குறிக்கப் பட்டிருக்கப் பட்டிருகின்றன அல்லாவா?
அவைகளைத் தனியாக ஒரு கோப்பில் எழுதி styles1.css என்பதாகச்
சேமித்துக் கொண்டு மீயுரை படிவத்தில் ப்யன்படுத்திக் கொள்ளலாம். மீயுரை
படிவத்தில் கீழ்க் கண்டவாறு அதைக் குறிக்க வேண்டும்:

<LINK REL="stylesheet" TYPE="text/css"
HREF="styles1.css">

Styles ஏதுமில்லாத கீழ்க் காணும் மீயுரை குறியீட்டை மட்டும் கொண்ட
பகுதியை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
பக்கத்தில் ஒட்டி எப்படி இருக்கிறதென்று பாருங்கள்.

<HTML>
<HEAD>

</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 to
do <b>changes</b> in your pages frequently.
<hr>
<P> This paragraph has yellow<br>
Background.</P>
</BODY>
</HTML>

பின்னா, <HEAD> </HEAD> இவற்றிக் கிடையே காணும் இடைவெளியில்
கீழ்க்கண்ட வரியைப் புகுத்தி மீண்டும் சோதித்துப் பாருங்கள். இந்த
வரியில்தான் style களை எந்த முகவரியில் பெற வேண்டும் என்ற கட்டளை
இருக்கிறது. இப்போது அழகாக்கப் பட்ட மீயுரை படிவத்தைக் காணலாம்.

<LINK REL="stylesheet" TYPE="text/css"
HREF="http://www24.brinkster.com/umarthambi/html_try/styles1.css">

இதனால் என்ன நன்மை?

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

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

குறிப்பு:
=======
இந்தப் பகுதியில் javascript இடம் பெற்றிருக்கிறது. javascript ஐக்
கற்றுத் தருவது நோக்கமல்ல. உங்கள் பக்கங்களை சிறப்புறச் செய்யும் ஒரு
சிலவற்றை அறிமுகம் செய்வதே இதன் நோக்கம்.

சில நேரங்களில் இணையப் பக்கங்களில் காணும் இணைப்புக்களை(links)ச்
சொடுக்கும்போது நாம் பார்த்துக் கொண்டிருக்கும் அதே சாளரத்திலேயே (window) இணைப்பச் சொடுக்கப்பட்ட பக்கமும் திரையேறுவதை(loading)க் கண்டிருகிறோம். முந்தய பக்கத்தைக் காண வேண்டுமானால் "back" பொத்தானையோ அல்லது Alt+இடது அம்புக் குறியையோ இயக்கவேண்டியிருக்கும். இம்மாதிரி நேரங்களில் தற்போதைய, முந்தய பக்கங்களில் உள்ளவற்றை ஒரே நேரத்தில் சரி பார்க்க தேவை
ஏற்பட்டால் இயலாமல் போய்விடும். இதற்கு ஒரு வழி இருக்கிறது.
கொடுக்கபட்டிருக்கும் இணைப்பு இணயத் தள முகவரியின் மீது வலச் சொடுக்குச்
சொடுக்கி, "open in new window" என்பதைத் தேர்ந்தெடுத்தால் புதிய
சாளரத்தில் பக்கம் திரையேறும். இது பயனா கையாளும் முறை.

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

Java script மூலம் ஒரு சாளரத்தை கீழ்க் கண்ட முறையில் திறக்கலாம்:

window.open("page URL","name","parameters")

இதில் page URL என்பது புதிய சாளரத்தில் எந்த மீயுரை பக்கம்
காண்பிக்கப் படவேண்டும் என்பதையும், name என்பது அந்த சாளரத்தின்
பெயரையும், parameters என்பது அந்தச் சாளரம் எந்தெந்தப் பண்புகளைக்
கொண்டிருக்க வேண்டும் என்பதையும் குறிக்கும்.

ஒரு "உந்தி வரும்"(pop-up) சிறிய சாளரத்தில் கீழ்க் காணும் விடயங்கள்
தேவைப் படாது:

Menu bar
Tool bar
Location (இணைய முகவரி தரப்படுமிடம்)
Directory (இணைய முகவரிப் பட்டியல்)
Title bar
Status bar (சாளரத்தின் கீழ்ப் புறத்தில் காணப்படுவது)
Scroll bars
Resize (நீள அகலத்தை இழுத்து மாற்றுவது)

இவையன்றி, சாளரத்தின் தேவையான நீள அகலத்தை, படத்தனிம(pixel)
அளவில் தரலாம்.

ஆக, 200 நீள 200 அகல படத்தனிம அளவு கொண்ட ஓர் உந்தி வரும் சிறு
சாளரத்தைப் பெற உதவும் பண்புகள் இப்படி அமையும். இவைகள் control என்ற
'மாறி'யில்(variable) வரையறுக்கப் பட்டுள்ளன.

var control

control="toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbars=no,resizable=no,copyhistory=no,titlebar=no,width=
200,height=200"

இனி, இந்த javascript ஐக் கொண்ட முழுமையான HTML படிவத்தைக்
காண்போம்:

<HTML>
<HEAD>
<script type="text/javascript">
function openwindow()
{
var control
control="toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no,copyhistory=no,titlebar=no,width=
200,height=200"
window.open("page URL","popup",control)
}
</script>
</HEAD>
<BODY>
<H2> Opening a small pop-up window</H2>
<a href="javascript:openwindow()">Click here to open a
small window</a>

</BODY>
</HTML>

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

சென்ற முறை "உந்தி வரும்"(pop up) சிறு சாளரத்தை உருவாக்குவதெப்படி
என்று கண்டோ ம். ஓர் அன்பர், அது தானே மறையுமாறு செய்ய இயலுமா
என்று கேட்டிருந்தார். அது எவ்வாறென்று இன்று காண்போம்.

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

<HTML>
<HEAD>
<script type="text/javascript">
function openwindow()
{
var control

control="toolbar=no,location=no,directories=no,status=no,menubar

=no,scrollbars=no,resizable=no,copyhistory=no,titlebar=no,width=
200,height=200"

smallwind=window.open("page URL","popup",control)

setTimeout('closeWin(smallwind)', 5000);
}
function closeWin(smallwind)
{
smallwind.close()
}
</script>
</HEAD>
<BODY>
<H2> Opening a small pop-up window</H2>
<p>Closes automatically after 5 seconds</p>
<a href="javascript:openwindow()">Click here to open a
small window</a>
</BODY>
</HTML>

இதில் "setTimeout" என்பது நேரத்தை குறிக்க உதவும் ஆணையாகும். 5000
என்பது 5000 'மில்லி நொடி' என்பதாகும். அதாவது 5 நொடி.

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

இன்று HTML பக்கங்கள் எழுத பல வகையான மென் பொருட்கள்
கிடைக்கின்றன. மீயுரை பட்டிகள் பற்றி அறிய வேண்டிய தேவையில்லாமலேயே எளிதாக வலைப்
பக்கங்கள் எழுதி விடலாம். மேலும் "காண்பதைப் பெறு" என்பதான WYSIWYG
(What You See Is What You Get) தன்மை கொண்ட Microsoft இன்
Front Page போன்ற மென்பொருட்கள், வலைப் பக்கத்தை தயாரிக்கும்போதே
அது எப்படி அமையும் என்பதை உணர்த்தும் வகையாக அமைந்திருக்கின்றன.
இம்மாதிரியான மென்பொருட்கள் தொழில் ரீதியான, சிக்கலான பக்கங்களை
இயற்ற உதவுகின்றன என்றாலும் பொதுவாகக் கடைபிடிக்க வேண்டிய சில
நியதிகள் உள்ளன. அவை உங்கள் பக்கங்கள் விரைவாக திரையேற உதவும்.

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

மிகத் தேவையான இடங்களில் மட்டுமே வரை படங்களை உபயோகியுங்கள்.
படங்களைத் தயாரிக்கும்போது சில முறைகளை கையாண்டால் படத்தின்
அளவைக்(kilo bytes) குறைக்கலாம். படங்களை தொகுக்க அல்லது
மாற்றியமக்க உதவும் மென்பொருட்கள் (photoshop போன்றவை) இவற்றிற்கு
உதவுகின்றன. படங்களை சேமிக்கும்போது "வலைத்தளதிற்காக" சேமிக்கும்
வகையை தோர்வு செய்து கொண்டால் படத்தின் உண்மையான அளவில்(size in
KB) இரண்டு அல்லது மூன்று பகுதியாகக் கூட குறைத்துவிடலாம். படத்தின்
நுண்மை(resolution) எவ்வள்வுதான் இருந்தாலும் அது உலவியில்
தோற்றுவிக்கப் படும்போது ஒரு குறிப்பிட்ட அளவிற்கு மேல் கிட்டுவதில்லை.
எனவே உலவியில் தோன்றுமளவிற்கு அதன் நுண்மை இருந்தால் போதுமானது.
மேலும் படத்தின் வண்ணக் கலவையும் அவ்வாறே. வண்ணக் கலவை எவ்வளவாக
இருந்தாலும் ஒரு குறிப்பிட்ட அளவிற்கு மேல் தெரிவதில்லை. எனவே 256
வண்ணங்கள் கொண்டவையாகவே இருப்பது நல்லது. இதனாலும் படத்தின்
அளவுவெகுவாகக் குறையும். கருப்பு வஎள்ளைப் படங்களாக இருந்தால்
படத்தைச்சேமிக்கும்போது கருப்பு வெள்ளையாகவே சேமிக்கலாம். படத்தின் அளவில் கிட்டத்தட்ட பத்தில் ஒரு பங்காகக் குறைத்துவிடலாம்.

வலைப் பக்கத்தில் படம் தெரிய வேண்டிய பகுதியில் இடைவெளி அதிகம்
இருந்தால் அதை நிரப்ப படத்தை பெரிதாக இட வேண்டியதில்லை. அதற்குப்
பதிலாக <img> பட்டியில் திரையில் படம் தொன்ற வேண்டிய நீள
அகலத்தைத் தரலாம்(இவ்வாறு செய்யும் போது படத்தின் தரம் குறையா வண்ணம்
பார்த்துக் கொள்ள வேண்டும்). இதனால் படத்தின் kb அளவு கூடாது.

உங்கள் பக்கத்திற்கு பின்னரங்கம்(background) தர எண்ணினால் பெரிய
அளவு படத்தைத் தராதீர்கள். சிறிய படத்தை பாவித்து "tile"  செய்து
திரையை நிரப்பிக் கொள்ளலாம்.

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

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

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

தமிழ்ப் பக்கங்கள் எழுதும்போது <HEAD> பகுதியில்
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=x-user-defined">
என்ற வரியைச் சேர்க்க மறக்காதீர்கள். இது தானாகவே உலவியில்
charset ஐ user-defined க்கு மாற்றிடும். பயனார் ஒவ்வொரு முறையும்
அவார் உலவியில் மாற்றம் செய்யத் தேவையிருக்காது.

(முற்றும்)

ToTop