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

இதுவரை கண்ட பட்டிகள் அனைத்தையும் கையாண்டு ஒரு முழுமையான படிவத்தைக் காணும் முன் மேலும் ஒரு உபயோகமான பட்டியைப் பார்ப்போம்.
சில நேரங்களில் படிவத்தின் குறுக்கே கிடைக் கோடு இட வேண்டிய தேவை ஏற்படலாம். அதற்கு <HR> அதாவது (H)orizontal (R)ule என்ற பட்டியை உபயோகப் படுத்தவேண்டும். இந்த <HR> பட்டியை உபயோகித்தால் திரையின் இரு புறத்திலும் தொடும்படியாக ஒரு கிடைக் கோடு அமையும். தேவையானால் இதன் அகலத்தை இப்படி குறைத்துக் கொள்ளலாம்:

வழி 1: முழு கோட்டின் அகலத்தில் இத்தனை சதவீதம் என்று சொல்லுதல்

<HR width="40%">

வழி 2: நமக்கு வேண்டிய கோடு, எத்தனை புள்ளிகளால்(pixel) ஆனதாக இருக்க வேண்டும் என்று சொல்லுதல். மேல் உள்ளதைப் போலவே, % குறி இல்லாமல் எழுத வேண்டும்

<HR width="40">

இதுவரை நாம் கற்றுக் கொண்ட பட்டிகள்:

<HTML>
<BODY>
<H1>,<H2>….<H6>
<B>
<P>
<BR>
<CENTER>
<FONT>
<OL>
<UL>
<LI>
<HR>

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

இது மிக, மிக அடிப்படையான ஒரு படிவம். இன்னும் நிரம்ப இருக்கிறது.

<HTML>
<BODY>
<H2><CENTER><U>நான் படித்த புத்தகங்கள்</U></CENTER></H2>
<P>சென்ற வாரம் சில புத்தகங்கள் வாங்கி வந்தேன். ஓய்வு கிட்டிய நேரங்களில் ஒவ்வொன்றாய் படித்தேன் எல்லாம் பயனுள்ள புத்தகங்கள். கீழ் காணுபவைதான் நான் வாங்கிவந்த புத்தகங்கள்:</P>
<OL><B><I>
<LI><A HREF="#ஒற்றுமை">ஒற்றுமை</A>
<LI><A HREF="#கணினி">கணினி கற்றுக் கொள்ளுங்கள்</A>
<LI><A HREF="#நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
<LI><A HREF="#பகை">புகை, மனிதனுக்குப் பகை</A>
</I></B></OL>
அந்தப் புத்தகங்களிலிருந்து ஒரு சில வரிகளை இங்கே காண்போம்.
<UL><B>
<LI><A NAME="ஒற்றுமை"></A>ஒற்றுமை
</B></UL>
ஒற்றுமை என்பது இன்றைய உலகத்தில் அருகி வரும் ஒன்றாகிவிட்டது. ஒரே நோக்கத்திற்காகச் செயல்படும் இயக்கங்கள் அல்லது தனி மனிதர்கள் கூட தம்மிடையே ஒற்றுமை காண மறுக்கின்றனர். இதன் பிரதான காரணம் தன்னை முன்னிறுத்த வேண்டும் என்ற எண்ணமே.
<UL><B>
<LI><A NAME="கணினி"></A>கணினி கற்றுக் கொள்ளுங்கள்
</B></UL>
இன்றைய கால கட்டத்தில் கணினிக் கல்வி என்பது இன்றியமையாத ஒன்றாகிவிட்டது. அதிலும் தாய் மொழியில் கற்பிப்பதென்பது தேவை என்று ஆகிவிட்டது. ஒரு படைப்பாளன் என்ற முறையில் தான் சிரமப் பட்டு வடித்த தன் கருத்துக்கள் சிதையாமல் அனைவருக்கும் புரியும் வண்ணமும், அதே நேரத்தில் புது தமிழ்ச் சொற்களை படிப்பவர் மனதில் பதியுமாறு செய்வதும் அவனுடைய கடமையாகிறது.
<UL><B>
<LI><A NAME="நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
</B></UL>
'நோயற்ற வாழ்வே குறைவற்ற செல்வம்' என்பது பழமொழி.<BR>
அந்த செல்வத்தை சிலர் இயற்கையிலேயே இழந்திருந்தாலும் இன்றைய மருத்துவ முன்னேற்றத்தில் அவைகளை திரும்பப் பெறுவதென்பது சாத்தியமான ஒன்றாகி வருகிறது. இன்று நிறமிகளைப் பற்றிய ஆய்வு அதன் உச்சத்தையே எட்டியிருக்கிறது.
<UL><B>
<LI><A NAME="பகை"></A>புகை, மனிதனுக்குப் பகை
</B></UL>
புகைப்பதால் உண்டாகும் தீமைகளை புகைப்பவர்களே அறிந்திருந்தும் அவர்கள் சிந்திப்பதில்லை. 'என் உடல் கெட்டால் உனக்கென்னெ?' என்பது அவர்கள் எண்ணம். அவர் உடம்பு, அவர் நினைத்துக் கொள்ளட்டும். <I>ஆனால் நான் நான் சுவாசிக்கும்படியாக அவர் ஊதித் தள்ளுவது எந்த விதத்தில் நியாயம்?</I>
<HR>
<FONT face = "InaimathiTSC" color="MidnightBlue" size="-2">குறிப்பு:<BR>
மேற்கண்ண்டவை அனைத்தும் கற்பனையே.<BR>
இந்த ஆக்கத்திற்கான மாதிரியாக எழுதப் பட்டது.<BR>
-உமர்</FONT>
</BODY>
</HTML>

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

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

<A NAME="கணினி"></A>

பின்னர், சுட்டியைக் குறிக்க வேண்டும். நாம் நான்கு புத்தகங்களையும் வரிசைப் படுத்தி பட்டியலிட்டோ மல்லவா? அவைகளை சுட்டியாக மாற்றிக் கொள்ளலாம். "கணினி கற்றுக் கொள்ளுங்கள்" என்பதற்கு முன்னால் <A HREF="#கணினி"> என்று குறிக்க வேண்டும்
இப்படிச் செய்வதன் மூலம் "கணினி" என்ற பெயரிடப்பட்ட இடத்திற்குத் தாவ வேண்டும் குறிக்கிறோம். அது இப்படி இருக்கும்:

<A HREF="#கணினி">கணினி கற்றுக் கொள்ளுங்கள்</A>
(# என்ற குறியை "கணினி" க்கு முன்னால் இடுவது அவசியம்)

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

<HTML>
<BODY>
<H2><CENTER><U>நான் படித்த புத்தகங்கள்</U></CENTER></H2>
<P>சென்ற வாரம் சில புத்தகங்கள் வாங்கி வந்தேன். ஓய்வு கிட்டிய நேரங்களில் ஒவ்வொன்றாய் படித்தேன் எல்லாம் பயனுள்ள புத்தகங்கள். கீழ் காணுபவைதான் நான் வாங்கிவந்த புத்தகங்கள்:</P>
<OL><B><I>
<LI><A HREF="#ஒற்றுமை">ஒற்றுமை</A>
<LI><A HREF="#கணினி">கணினி கற்றுக் கொள்ளுங்கள்</A>
<LI><A HREF="#நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
<LI><A HREF="#பகை">புகை, மனிதனுக்குப் பகை</A>
</I></B></OL>
அந்தப் புத்தகங்களிலிருந்து ஒரு சில வரிகளை இங்கே காண்போம்.
<UL><B>
<LI><A NAME="ஒற்றுமை"></A>ஒற்றுமை
</B></UL>
ஒற்றுமை என்பது இன்றைய உலகத்தில் அருகி வரும் ஒன்றாகிவிட்டது. ஒரே நோக்கத்திற்காகச் செயல்படும் இயக்கங்கள் அல்லது தனி மனிதர்கள் கூட தம்மிடையே ஒற்றுமை காண மறுக்கின்றனர். இதன் பிரதான காரணம் தன்னை முன்னிறுத்த வேண்டும் என்ற எண்ணமே.
<UL><B>
<LI><A NAME="கணினி"></A>கணினி கற்றுக் கொள்ளுங்கள்
</B></UL>
இன்றைய கால கட்டத்தில் கணினிக் கல்வி என்பது இன்றியமையாத ஒன்றாகிவிட்டது. அதிலும் தாய் மொழியில் கற்பிப்பதென்பது தேவை என்று ஆகிவிட்டது. ஒரு படைப்பாளன் என்ற முறையில் தான் சிரமப் பட்டு வடித்த தன் கருத்துக்கள் சிதையாமல் அனைவருக்கும் புரியும் வண்ணமும், அதே நேரத்தில் புது தமிழ்ச் சொற்களை படிப்பவர் மனதில் பதியுமாறு செய்வதும் அவனுடைய கடமையாகிறது.
<UL><B>
<LI><A NAME="நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
</B></UL>
'நோயற்ற வாழ்வே குறைவற்ற செல்வம்' என்பது பழமொழி.<BR>
அந்த செல்வத்தை சிலர் இயற்கையிலேயே இழந்திருந்தாலும் இன்றைய மருத்துவ முன்னேற்றத்தில் அவைகளை திரும்பப் பெறுவதென்பது சாத்தியமான ஒன்றாகி வருகிறது. இன்று நிறமிகளைப் பற்றிய ஆய்வு அதன் உச்சத்தையே எட்டியிருக்கிறது.
<UL><B>
<LI><A NAME="பகை"></A>புகை, மனிதனுக்குப் பகை
</B></UL>
புகைப்பதால் உண்டாகும் தீமைகளை புகைப்பவர்களே அறிந்திருந்தும் அவர்கள் சிந்திப்பதில்லை. 'என் உடல் கெட்டால் உனக்கென்னெ?' என்பது அவர்கள் எண்ணம். அவர் உடம்பு, அவர் நினைத்துக் கொள்ளட்டும். <I>ஆனால் நான் நான் சுவாசிக்கும்படியாக அவர் ஊதித் தள்ளுவது எந்த விதத்தில் நியாயம்?</I>
<HR>
<FONT face = "InaimathiTSC" color="silver" size="-2">குறிப்பு:<BR>
மேற்கண்ண்டவை அனைத்தும் கற்பனையே.<BR>
இந்த ஆக்கத்திற்கான மாதிரியாக எழுதப் பட்டது.<BR>
-உமர்</FONT>
</BODY>
</HTML>

மேற்கொண்டு, படிவத்தை அலங்காரப் படுத்துவதைப் பற்றி இனி பார்ப்போம்.

அதற்கு முன் வண்ணங்களைப் பயன்படுத்துவது பற்றி அறிந்து கொள்வோம். நாம் கண்ட மாதிரிப் படிவத்தில், வண்ணங்களைப் பெறுவதற்காக "red", "blue" என்று சொற்களைப் பயன்படுத்தினோம். குறிப்பிட்ட வண்ணங்களுக்கு மட்டுமே சொற்களைப் பயன்படுத்தமுடியும். படிவங்களில் பயன்படுத்த இவை போதும் என்றாலும், தொழில் முறையில் இணையப் பக்கங்களை இயற்றும்போது வேறு முறையைக் கையாளுகிறோம். இம்முறை மூலம் விரும்பிய வண்ணக் கலவைகலைப் பெற முடியும். சிவப்பு, பச்சை, நீலம் ஆகியவற்றின் வேறுபட்ட அளவுகளை 'பதினாறு எண்ணிய' முறையில்(hexadecimal: hexa-ஆறு, decimal-பத்து) குறிக்க வேண்டும். இந்த 'பதினாறு எண்ணிய'முறை என்றால் என்ன? நாம் சாதாரணமாக எண்ணும்போது 0 இல் தொடங்கி 9 வரை பத்து கொண்ட தொகுதியாக எண்ணுவோம். 'பதினாறு' வகை எண்ணிக்கையில் பத்துக்கு மேல் எப்படிப் பெறுவது?

முடிந்த வரையில் எளிய முறையில் தருகிறேன். புரிந்துகொள்ள முயலுங்கள். இல்லையென்றாலும் பாதமில்லை; விட்டுவிடுங்கள்.
இதோ வழி:

9 க்குப் பின் A, B, C, D, E, F என்ற 6 எழுத்துக்களையும் சேர்த்துக் கொள்ள வேண்டும்.

அது இப்படி அமையும்:

0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F

சாதாரண எண் முறையில் 9 க்குப் பின் இடது புறம் 1 இட்டு அடுத்த தொகுதியின் தொடக்கமாக வலப்புறம் 0 இடுகிறோமோ(10 என்பதாக), அதே மாதிரி, 'பதினாறு வகை' எண்ணிக்கையில் 15 முடிந்தவுடன் (அதாவது F முடைந்த பின்னர்) ஒரு தொகுதி முடிந்ததின் அடையாளமாக இடப்புறம் 1 ம் அடுத்த தொகுதியின் தொடக்கமாக வலப் புறம் 0 உம் இட வேண்டும். அதாவது இந்த முறையில் 16 ஐக் குறிக்க வேண்டுமானால் 10 என்று எழுத வேண்டும். சரி சாதாரண எண் வரிசையிலும் 10 உண்டு 'பதினாறு வகை'யிலும் 10 உண்டு. இதை எவ்வாறு பிரித்தறிவது? இதற்கு 'பதினாறு வகை'எண் வரிசை என்பதை உணர்த்த HEX (hexadecimal) என்பதைச் சேற்க வேண்டும். அதாவது 'பதினாறு வகை' எண்ணிக்கையில் 16 ஐக் குறிக்க 10HEX என்று எழுத வேண்டும்.

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

அடிப்படை வண்ணங்களான சிவப்பு, பச்சை, நீலம் ஆகியவற்றிலிருந்தே பிற வண்ணங்களை பெறுகிறோம் என்பதை நாம் அறிவோம். மஞ்சள் வண்ணத்தைப் பெற, சிவப்பையும் பச்சையையும் கலக்க வேண்டுமென்றும்; செந்நீலத்தைப்(megenta) பெற, சிவப்பையும் நீலத்தையும் கலக்க வேண்டுமென்றும்; நீலப்பச்சையைப்(cyan) பெற, நீலத்தையும் பச்சையையும் கலக்க வேண்டுமென்றும் அறிந்திருக்கிறோம். மற்ற வண்ணங்களும் அடிப்படை வண்ணங்களின் வேறுபட்ட விகிதக் கலவைகளே என்றும் அறிவோம். பட்டியில் இந்த எண்களை உபயோகிக்கும்போது சிவப்பு, பச்சை, நீலம்(RGB) என்ற வரிசை முறையைக் கையாள வேண்டும். ஒவ்வொரு வண்ணமும் 0 லிருந்து 256 அலவுகளால் அதாவது HEX இல் 00 இலிருந்து FF வரையான அளவுகளாக இருக்க வேண்டும்.

ஓவ்வொன்றிற்கும் இரண்டிரண்டாக 6 இலக்கம் அல்லது எழுத்துக்களைக் கொண்டதாக இருக்கும். உதாரணமாக மஞ்சளுக்கு FFFF00 ஆக இருக்கும். இதில் முதல் FF சிவப்பையும், இரண்டாவது FF பச்சையையும் 00 நீலத்தையும் குறிக்கும். இங்கு நீலம் 00 என்றிருப்பதால், நீலத்தின் பங்கு ஏதுமில்லை என்று தெரிகிறது. இவ்வாறு இலக்கங்களை மாற்றி எண்ணற்ற வண்ணங்களை பெறலாம்.

இனி பட்டியில் எவ்வாறு கையாளலாம் என்று பார்ப்போம். உதாரணமாக நம் மாதிரிப் படிவத்தின் பின்னரங்கின்(background) வண்ணத்தை மஞ்சளாக மாற்ற எண்ணுகிறீர்கள் என்று வைத்துக் கொள்ளுவோம். கீழ்க் கண்டவாறு <BODY> பட்டியில் திருத்தம் செய்யவும்:

<HTML>
<BODY bgcolor="#FFFF00">

இதில் கவனிக்க வேண்டியது, FFFF00 என்ற அலகுகளுக்கு முன் # இட வேண்டியது. படிவத்தில் மாற்றம் செய்து சோதிதுப் பாருங்கள். வெவ்வேறு அளவுகள்(எழுத்து F ஐத் தாண்டக் கூடாது) இட்டும் சோதிதுப் பாருங்கள்.

குறிப்பு:

இத்துடன் இணைக்கப் பட்டிருக்கும் சிறிய jpg கோப்பை நாம் சோதிதுக் கொண்டிருக்கும் படிவம் இருக்கும் அதே directory இல் சேமித்துக் கொள்ளவும்.

படிவத்தின் பின்னரங்கின் வண்ணத்தை மாற்ற <BODY> பட்டியில் bgcolor(BackGround color) என்பதைச் சேற்க வேண்டும் என்று கண்டோ ம். இவ்வாறே வார்ப்பின்(எழுத்துரு -font) வண்ணத்தை மாற்ற HEX எண் முறையைப் பயன் படுத்தலாம். வண்ணப் பெயர்களும் அவைகளுக்கான HEX மதிப்புக்களும் இந்த படிவத்தின் இறுதியில் தரப் பட்டிருக்கின்றன. பெயர்களையோ அல்லது அதன் மதிப்புக்களையோ பட்டிகளில் பாவிக்கலாம்.

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

<BODY background=bg.jpg>

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

நாம் இங்கு பார்த்து வருவது, ஒருபடிவத்தை(document) மீயுரைகுறிமொழியில் (HTML) எவ்வாறு எழுதலாம் என்பதைப் பற்றியும் அதை எப்படி மெருகூட்டலாம் என்பது பற்றியும்தான்.

இப்போது நீங்கள் உங்கள் வரவு செலவு கணக்கு(இதற்கும் HTML-ஆ என்று கேட்காதீர்கள்!) அல்லது ஒரு கவிதை எழுதுவதாக வைத்துக் கொள்ளுங்கள். கவிதையின் வரிகள் சற்று முன்னும் பின்னுமாக அமைய வேண்டி வரலாம். ஆனால் நம் மீயுரைகுறிமொழி, வெள்ளை இடைவெளிகளை வெட்டித் தள்ளிவிடும் என்று அறிவோம். உங்களுக்கு, நீங்கள் மூலத்தில் எவ்வகையில் எழுதுகிறீர்களோ, அம்மதிரியே உலவியிலும் காணவேண்டும். என்ன செய்யலாம்? இதற்கும் வழிதருகிறது ஒரு பட்டி. அதுதான் <PRE> எனப்படும் (Predefined) பட்டி.

<PRE> </PRE> இவைகளுக்கு இடையில் எம்மாதிரி எழுதப் படுகின்றனவோ, உலவியிலும் அம்மாதரியே தோன்றும். கீழே காணும் பகுதியை வெட்டி ஒரு உரை தொகுப்பியில் (text editor) pre.html என்ற பெயரில்(அல்லது ஏதேனும் ஒரு பெயரில்) சேமித்து உலவியில் சோதிதுப் பாருங்கள்:

<HTML>
<BODY>
<H2> <B><CENTER>இந்த பகுதி பட்டி இடப்படாத பகுதி</CENTER><B></H2>

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

-கவிக் கொண்டல் மா. செங்குட்டுவன்

<HR>

<H2> <B><CENTER>இந்த பகுதி பட்டி இடப்பட்ட பகுதி</CENTER><B></H2>
<PRE>
கண்ணிருந்தும் கல்லாதார் வாழ்க்கை என்றும்
காரிருளில் நடக்கின்ற செயெலே யாகும்
மண்ணுக்குள் மறைந்திருக்கும் நீரைப் போல
மாந்தருக்குள் ஒளிந்திருக்கும் திறனைக் காண
நுண்ணறிவை வெளிப்படுத்தும் கல்வி தேவை
நுரைக்குமிழி போலதுவும் பொங்கு தற்கும்
எண்ணத்தை எடுத்தியம்பும் ஆற்ற லுக்கும்
எழுத்தறிவே ஒளிவிளக்காய் மிளிர்ந்து நிற்கும்.

-கவிக் கொண்டல் மா. செங்குட்டுவன்

</PRE>
</BODY>
</HTML>

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