Tuesday 23 April 2013

எளிய தமிழில் HTML கற்றுக்கொள்ள - பட்டியல்கள் (Lists)

 கடந்த சில தினங்களாக எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர் பதிவு எழுத இயலவில்லை என்பதை வருத்தத்துடன் தெரிவித்துக்கொள்கிறேன். இடைவிடாது பணி இருந்ததால், என்னால் இந்தத் தொடரை முழுவதுமாக எழுதி முடிக்க முடியுமா? என்ற சந்தேகம் தோன்று மறைந்தபோதும், எடுத்த முடிவில் உறுதியாய் இருந்து தொடரை முடிப்பதில் மீண்டும் ஆர்வம்கொண்டு எழுதியுள்ளேன். கடந்த எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர்பதிவில் BGSOUND (backgroun sound) என்பதைப் பார்த்தோம்.
List Tag in Html

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

இன்றைய பதிவில் பட்டியல்களைப்((LISTS)) பற்றிப் பார்ப்பும்.

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

இதில் மூன்று வகையான பட்டியல்களை உருவாக்கலாம். அவையாவன:

1. வரிசைப் பட்டியல் (Ordered list)
2. வரிசைப்படுத்தாப் பட்டியல் (Unordered list)
3. வரையறைப் பட்டியல் (Definition List)

வரிசைப் பட்டியல் (Ordered list)

இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் எண்வரிசைப் பட்டியலைப் போன்றதாகும். இந்தப் பட்டியலில் 1,2,3.. போன்ற எண்கள், (I,II,II... i,ii,iii,... போன்ற ரோமன் எண்கள் அல்லது A,B,C... a,b,c... போன்ற ஆங்கில எழுத்துக்கள் இருக்கலாம். வரிசைப் பட்டியலை <OL> என்னும் குறி ஒட்டில் தொடங்கி, </OL> என்னும் குறிஒட்டில் முடிக்க வேண்டும். இந்தக்  குறிஒட்டுகளுக்கு இடையே கொடுக்கப்படும் ஒவ்வொரு தகவலும் <LI> என்னும் குறிஒட்டுடன் (TAG)என்னும் குறிஒட்டுடன் தொடங்க வேண்டும்.

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

<OL>
<li>Tamil</li>
<li>English</li>
<li>Science</li>
<li>Maths</li>
</OL>

இதனுடைய வெளிப்பாடு

  1. Tamil
  2. English
  3. Science
  4. Maths
இவ்வாறு இருக்கும். அதேபோல HTML ஆவணத்தில் நாம் விரும்பிய எண் வரிசையிடலாம். நாம் விரும்பிய வரிசையை <OL> குறிஒட்டில் TYPE என்னும் பண்பைப் பயன்படுத்தி கொடுக்கலாம். கீழிருக்கும் உதாரணத்தைப் பாருங்கள்.

HTML ஆவணத்தில் <OL> குறிஒட்டில் பயன்படுத்தும் பண்புகள்
TYPE=”1”
1,2,3,….
TYPE=”A”
A,B,C,..
TYPE=”I”
I,II,III,…
TYPE=”I”
i,ii,iii,….

START என்னும் பண்பின் மூலம் பட்டியல் எந்த எண்ணிலிருந்து தொடங்க வேண்டும் என்பதைக் குறிப்பிடலாம். உதாரணமாக, <OL TYPE="1" START="4"  என்னும் குறிமுறை, பட்டியலை 4,5,6.. என நான்கு(4) எனத்தொடங்கும் எண்ணிலிருந்து தொடங்கும்படி அமைக்கலாம். START என்னும் பண்பு இதுபோல எந்த எண்ணிலிருந்து தொடங்க வேண்டும் என்பதைக் குறிக்கப் பயன்படுகிறது.

வரிசைப்படுத்தா பட்டியல்கள் (Unordered Lists)

இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் புல்லட் குறி பட்டியலை போன்றதாகும். இந்தப் பட்டியலில் வட்டமான அல்லது சதுரமான புல்லட் குறிகளைப் பயன்படுத்தி பட்டியல்களை உருவாக்கலாம். இந்த பட்டியலை <UL> என்னும் குறி ஒட்டுடன் தொடங்கி, </UL> என்னும் குறி ஒட்டுடன் முடிக்க வேண்டும். இந்தக் குறி ஒட்டுகளுக்கு இடையே கொடுக்கப்படும் ஒவ்வொரு தகவலும் கீழ்க்கண்ட உதாரணத்தில் உள்ளவாறு <LI> என்னும் குறி ஒட்டுடன் தொடங்க வேண்டும்.

HTML Code
Browser Display
<UL>
<li>Red
<li>Green
<li>Blue
</UL>
·         Red
·         Green
·         Blue


<UL> குறி ஒட்டுடன் பயன்படுத்தப்படும் TYPE பண்பு புல்லட் குறிகளின் ஸ்டைல்களைக் கொடுக்கப் பயன்படுகிறது. TYPE="Disc" என்பது நிரப்பிய வட்டத்தையும்,TYPE="Square"என்பது நிரப்பிய சதுரத்தையும், TYPE="Circle" என்பது வட்டக் கோட்டையும் புல்லட் குறிகளாகக் கொடுக்கப் பயன்படுகிறது.

வரையறைப் பட்டியல்கள் (Definition Lists)

இந்தப் பட்டியல், ஒவ்வொரு தகவலையும் அது என்ன என்று வரையறுத்துக் கூற உதவுகிறது. இதில் தகவல்கள் <DL> மற்றும் </DL> என்னும் குறி ஒட்டுகளுக்கு இடையே வர வேண்டும். ஒவ்வொரு தகவலும் <DT> என்ற குறி ஒட்டை அடுத்தும், ஒவ்வொரு வரையறையும் <DD> என்ற குறி ஒட்டை அடுத்தும் வர வேண்டும்.

<DT> மற்றும் <DD> குறி ஒட்டுகளுக்கு, முடிவுக் குறி ஒட்டுகள் இல்லை.

DL, DD, DT என்பதன் விரிவாக்கங்கள் முறையே Definition List, Definition Data, Definition term என்பதின் முதல் எழுத்துக்களைக்கொண்ட சுருக்கம் ஆகும்.

இந்த வரையறைப் பட்டியல்கள் (Definition Lists) பயன்படுத்தி ஒரு HTML Document எழுதுவோம் வாருங்கள்.

<HTML>
<HEAD>
<TITLE>Definition Lists</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Tea
<DD>A type of hot drink
<DT>Coffee
<DD>Another type of the hot drink
</DL>
</BODY>
</HTML>

இதனுடைய வெளிப்பாடு உலவியில் இவ்வாறு இருக்கும்.

Definition list in html

No comments:

Post a Comment

ஆன்லைன் வயது கால்குலேட்டர்


Udanz