HTML Tutorials 24- பட்டியல்கள் (Lists)
கடந்த
சில தினங்களாக எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர் பதிவு
எழுத இயலவில்லை
என்பதை வருத்தத்துடன் தெரிவித்துக்கொள்கிறேன்.
இடைவிடாது பணி இருந்ததால்,
என்னால் இந்தத் தொடரை முழுவதுமாக
எழுதி முடிக்க முடியுமா? என்ற சந்தேகம்
தோன்று மறைந்தபோதும், எடுத்த
முடிவில் உறுதியாய் இருந்து தொடரை முடிப்பதில்
மீண்டும்
ஆர்வம்கொண்டு எழுதியுள்ளேன். கடந்த எளிய தமிழில் HTML
கற்றுக்கொள்ள தொடர்பதிவில் BGSOUND (backgroun sound) என்பதைப்
இந்த
குறிஒட்டைப் பயன்படுத்தி உங்கள் வலைப்பக்கத்தில் பின்னணி
இசையை ஒலிக்கச்
செய்யலாம். பதிவைப் படிக்க நினைப்பவர்கள் இந்த
இணைப்பைச் சொடுக்கவும்.
நாம்
பல சமயங்களில், பல தகவல்களை ஒன்றன்பின் ஒன்றாக
பட்டியலிட்டுக் காட்ட
வேண்டியிருக்கும். நீங்கள் MS Word போன்ற
சொற்செயலிகளால்(Word processor)
எண்வரிசை மற்றும் புல்லட் குறி
வரிசைகளை உருவாக்குவது பற்றி தெரிந்து
வைத்திருப்பீர்கள்.
1. வரிசைப் பட்டியல் (Ordered list)
2. வரிசைப்படுத்தாப் பட்டியல் (Unordered list)
3. வரையறைப் பட்டியல் (Definition List)
இந்தப்
பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் எண்வரிசைப்
பட்டியலைப்
போன்றதாகும். இந்தப் பட்டியலில் 1,2,3.. போன்ற எண்கள்,
(I,II,II...
i,ii,iii,... போன்ற ரோமன் எண்கள் அல்லது A,B,C... a,b,c... போன்ற
ஆங்கில
எழுத்துக்கள் இருக்கலாம். வரிசைப் பட்டியலை <OL> என்னும் குறி
ஒட்டில் தொடங்கி, </OL> என்னும் குறிஒட்டில் முடிக்க வேண்டும்.
இந்தக்
குறிஒட்டுகளுக்கு இடையே கொடுக்கப்படும் ஒவ்வொரு தகவலும் <LI>
என்னும் குறிஒட்டுடன் (TAG)என்னும் குறிஒட்டுடன் தொடங்க வேண்டும்.
குறிஒட்டுகளுக்கிடையே கீழிருப்பதைப் போல எழுதி அதன் வெளிப்பாட்டை
உலவியில்
திறந்து பாருங்கள்.
இதனுடைய வெளிப்பாடு
START
என்னும் பண்பின் மூலம் பட்டியல் எந்த எண்ணிலிருந்து தொடங்க
<OL>
<li>Tamil</li>
<li>English</li>
<li>Science</li>
<li>Maths</li>
</OL>
- Tamil
- English
- Science
- 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,….
|
வேண்டும்
என்பதைக் குறிப்பிடலாம். உதாரணமாக, <OL TYPE="1"
START="4" என்னும்
குறிமுறை, பட்டியலை 4,5,6.. என நான்கு(4)
எனத்தொடங்கும் எண்ணிலிருந்து
தொடங்கும்படி அமைக்கலாம். START
என்னும் பண்பு இதுபோல எந்த எண்ணிலிருந்து
தொடங்க வேண்டும்
என்பதைக் குறிக்கப் பயன்படுகிறது.
வரிசைப்படுத்தா பட்டியல்கள் (Unordered Lists)
இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் புல்லட் குறி
வரிசைப்படுத்தா பட்டியல்கள் (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)
இந்தப் பட்டியல், ஒவ்வொரு தகவலையும் அது என்ன என்று வரையறுத்துக்
வரையறைப் பட்டியல்கள் (Definition Lists)
இந்தப் பட்டியல், ஒவ்வொரு தகவலையும் அது என்ன என்று வரையறுத்துக்
கூற உதவுகிறது.
இதில் தகவல்கள் <DL> மற்றும் </DL> என்னும் குறி
ஒட்டுகளுக்கு
இடையே வர வேண்டும். ஒவ்வொரு தகவலும் <DT> என்ற
குறி ஒட்டை அடுத்தும்,
ஒவ்வொரு வரையறையும் <DD> என்ற குறி
ஒட்டை அடுத்தும் வர வேண்டும்.
<DT> மற்றும் <DD> குறி ஒட்டுகளுக்கு, முடிவுக் குறி ஒட்டுகள் இல்லை.
DL, DD, DT என்பதன் விரிவாக்கங்கள் முறையே Definition List, Definition
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>
இதனுடைய வெளிப்பாடு உலவியில் இவ்வாறு இருக்கும்.
பதிவு பயனுள்ளதாக இருந்தால் சமூக தளங்களில் பகிர்ந்து உங்கள்
நண்பர்களுக்குத் தெரியப்படுத்துங்கள்.
