எனும் tag பயன்படுத்தப்பட்டுள்ளதையும் பின்வரும் program-ல்
காணலாம்.
File: ss.html
The new price of this product is Rs.20000 Rs.10000
The chemical formulae of water: H20
An expression: x2+y2
10
Preservative tag
Preservative tag-ஆனது body tag-க்குள் உள்ளவற்றை அதன் வடிவம் கொஞ்சம் கூட
மாறாமல் அப்படியே browser-ல் வெளிப்படுத்த உதவுகிறது. உதாரணத்துக்கு
பின்வருமாறு ஒரு program-ஐ tag இல்லாமல் அடித்து, browser-ல் திறந்து
பார்க்கவும்.
File: pre.html
Kannan Store
Customer Name: T.Shrinivasan
Product Price
Hamam soap Rs.25
Sugar Rs.50
Rice Rs.150
[]
body tag-க்குள் நாம் ஒவ்வொரு வரிக்கும் கொடுத்த இடைவெளி, tag space
எல்லாம் புறக்கணிக்கப்பட்டு, வெறும் எழுத்துக்கள் மட்டும் browser-ல்
வெளிப்பட்டுவிட்டது. இப்போது அதே program-ஐ pre tag கொடுத்து browser-ல்
open செய்து பார்க்கவும்.
File: pre.html
Kannan Store
Customer Name: T.Shrinivasan
Product Price
Hamam soap Rs.25
Sugar Rs.50
Rice Rs.150
[]
[]
இப்போது நாம் கொடுத்த எழுத்தின் வடிவம் கூட மாறாமல், அவை browser-ல்
வெளிப்படுவதைக் காணலாம். எனவேதான் tag மிகவும் பயனுள்ளதாகக்
கருதப்படுகிறது.
11
Lists
HTML-ல் ஒருசில விவரங்களை நாம் பட்டியலிட விரும்பினால் 3 விதமான
பட்டியல்களைப் பயன்படுத்தலாம். அவை பின்வருமாறு.
Ordered list – தொடர்ச்சியான எண்களால் தகவல்களைப் பட்டியலிடுவது.
எனும் இணை tags இந்த வேலையை செய்யும்.
Unordered list – புள்ளிகளை வைத்து தகவல்களைப் பட்டியலிடுவது. எனும்
இணை tags இதற்குப் பயன்படுகிறது.
Definition list – ஒரு சிறு தலைப்பும், அதன்கீழ் அந்த தலைப்புக்கான
விளக்கமுமாக தகவல்களைப் பட்டியலிடுவது. எனும் இணை tags இந்த வேலையைச்
செய்யும்.
அடுத்தபடியாக பட்டியலில் வெளியாகும் ஒவ்வொரு தகவலும்
- எனும் இணை tags
மூலம் கொடுக்கப்படுகிறது. (li for list index). அதாவது நித்யா, வித்யா,
சத்யா எனும் மூன்று பெயர்களைப் பட்டியலிட விரும்பினால், ஒவ்வொரு பெயரின்
முன்னும் பின்னும்
tags-ஐ இணைக்க வேண்டும். பின்னர் இந்தப்
பெயர்களை தொடர்ச்சியான எண்களால் பட்டியலிட வேண்டுமா அல்லது புள்ளிகளை
வைத்து பட்டியலிட வேண்டுமா எனக் குறிப்பிடும் வகையில் அந்த மூன்று
பெயர்களையும் கொடுப்பதற்கு முன்னர் அல்லது எனும் tags-ஐயும்,
மூன்று பெயர்களையும் கொடுத்து முடித்த பின்னர் கடைசியாக அதற்கான இணை
tags-ஐயும் கொடுக்க வேண்டும்.
ஆனால் இந்த tag-ஆனது definition list-க்குப் பொருந்தாது. இந்த
முறையில் தலைப்பும், அதன் விளக்கமுமாக விவரங்கள் பட்டியலிடப்படுவதால்,
தலைப்பின் முன்னும் பின்னும் tags-ம், (dt for definition title)
தலைப்புக்கான விளக்கத்தின் முன்னும் பின்னும் tag-ஐயும் (dd for
definition data)பயன்படுத்த வேண்டும்.
இந்த மூன்று முறையிலும் விவரங்கள் பட்டியலிடப்படுவதை பின்வரும் உதாரணத்தில்
காணலாம்.
File: list1.html
Types of Testing
- Functional Testing
- Non-functional testing
Types of non-functional testing
- Performance testing
- Automation testing
- Functional Testing
- The functionality of an application will be tested.
-
- Performance Testing
- The performance of an application will be tested.
-
[]
Combined Lists
ஒரு் main list-ல் விவரங்களை பட்டியலிடும்போது, அதற்குள் sublist-ஐ
உருவாக்குவதே combined listsஎனப்படும். பின்வரும் உதாரண்த்தில் ordered
list-ன் கீழ் பட்டியலிடப்பட்டுள்ள Functional Testing எனும் விவரத்தின்
கீழ் ஒருசில தகவல்கள் Unordered list முறையில் பட்டியலிடப்பட்டுள்ளதைக்
காணலாம். அவ்வாறே Non-functional testing எனும் விவரத்தின் கீழும் தகவல்கள்
unordered list முறையில் பட்டியலிடப்பட்டுள்ளன.
File: list2.html
Types of Testing
- Functional Testing
- Integration testing
- System testing
- Non-functional testing
- Automation testing
- Regression testing
இதன் வெளிப்பாடு பின்வருமாறு இருக்கும்.
[]
12
Tables
அனைவருக்கும் Table என்றால் என்னவென்று தெரிந்திருக்கும். இப்போது HTML-ல்
ஒரு் table-ஐ உருவாக்குவது எப்படியென்று பார்க்கப்போகிறோம்.
முதலில் ஒரு் table-ன் தொடக்கத்தின் எனும் tag-ஐயும், கடைசியாக
அதற்கான இணை tag-ஐயும் கொடுக்க வேண்டும். பின்னர் table-ல் இடம்பெறப்போகும்
ஒவ்வொரு row-ன் ஆரம்பத்தில் -ம், இறுதியில்
tags-ஐயும் (tr for
table row) கொடுக்க வேண்டும். இது table-ன் தலைப்பாக அமையப்போகும்
row-க்கும் பொருந்தும்.
அடுத்தபடியாக table-ன் தலைப்பாக இடப்பெறப்போகும் ஒவ்வொரு வார்த்தையின்
முன்னரும் பின்னரும் | tags-ம் (th for table heading),
table-க்குள் தகவல்களாக இடம்பெறப்போகும் ஒவ்வொரு வார்த்தையின் முன்னரும்
பின்னரும் | tags-ம் (td for table data) இடம்பெற வேண்டும்.
இத்தகைய tags-ஐப் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு table-ஐப் பின்வருமாறு
காணலாம்.
File: table1.html
| Name |
Marks |
Rank |
| Viyan |
1200/1200 |
First |
| Harini |
1180/1200 |
Second |
[]
Border, height & width attributes
Border எனும் பண்பு ஒரு் table-க்கு அழகிய border-ஐ உருவாக்குவதற்கும்,
height எனும் பண்பு ஒரு் table-ன் நீளத்தை மாற்றி அமைப்பதற்கும், width
எனும் பண்பு ஒரு் table-ன் அகலத்தை மாற்றி அமைப்பதற்கும் பயன்படுகிறது.
இவை மூன்றும் தொடக்கத்தில் நாம் கொடுக்கின்ற tag-வுடன் இணைந்தே
காணப்படும். வெறும் border எனும் வார்த்தையை மட்டும் கொடுத்தால் போதுமானது.
மேலும் தடிமனான border வேண்டும் எனில் அதற்கு ஒரு மதிப்பும் தரலாம்.
உதாரணம் – border=3
height மற்றும் width-க்குக் கொடுக்கப்படும் மதிப்பு pixel-களின்
எண்ணிக்கையிலோ அல்லது சதவிகிதமாகவோ இருக்கும். பொதுவாக சதவீதத்தில்
கொடுப்பது புரிந்துகொள்ள சற்று சுலபமாக இருக்கும்.
இதனை பின்வரும் உதாரணத்தில் காணலாம்.
File: table2.html
| Name |
Marks |
Rank |
| Viyan |
1200/1200 |
First |
| Harini |
1180/1200 |
Second |
[]
Background colour attribute
இந்தப் பண்பு table-ல் நிறங்களைக் கொண்டுவரப் பயன்படுகிறது.
Bgcolor=”yellow” என tag-வுடன் இணைந்து கொடுக்கும்போது முழு
table-ம் மஞ்சள் நிறத்தில் காணப்படும். இந்தப் பண்பினை ஏதேனும் ஒரு்
cell-க்கு மட்டும் கொடுக்கும்போது அந்த இடம் மட்டும் நாம் குறிப்பிட்டுள்ள
நிறத்தில் காணப்படும்.
இதனைப் பின்வரும் உதாரணத்தில் காணலாம்.
File: table3.html
| Name |
Marks |
Rank |
| Viyan |
1200/1200 |
First |
| Harini |
1180/1200 |
Second |
[]
13
Links
ஒருசில வலைதளங்களில் click here for more என்றிருக்கும். அங்கு சென்று நாம்
சொடுக்கும்போது, அது நம்மை இன்னொரு பக்கத்திற்கு கொண்டு செல்லும். இவ்வாறு
ஒன்றை நாம் சொடுக்கும்போது அது நம்மை இன்னொரு பக்கத்திற்கு அழைத்துச்
செல்வதே links எனப்படும். இவற்றை எவ்வாறு உருவக்குவதென்று இந்தப் பகுதியில்
பார்க்கலாம்.
முதலில் link1.htm எனும் ஒரு் program-ல் Rhymes-க்கான ஒரு் அறிமுகத்தைக்
கொடுத்துவிட்டு, அதனடியில் Click here for Chubby Cheeks Rhyme என்று ஒரு்
link-ஐ உருவாக்கவும். link-ஐ உருவாக்குவதற்கு anchor tags அதாவது
பயன்படும். இதற்கிடையில் கொடுக்கப்படும் வார்த்தைகள் நீலநிறத்தில்
அடிக்கோடிடப்பட்ட link-ஆகத் தென்படும். இதனை நாம் சொடுக்கும்போது எந்த
இடத்திற்குச் செல்ல வேண்டும் என்பதை href எனும் பண்பு தீர்மானிக்கும்.
hypertext reference என்பதே href ஆகும்.
File: link1.htm
Nursery Rhymes
Introduction – Rhymes
Most children love being told Nursery Rhymes. The most popular rhymes
are listed here. Even elders love to hear these rhymes. They are sweet
to our ears forever. These rhymes speak volumes about the interest shown
by the education department to enthuse the children to speak out.
Click here for Chubby Cheeks Rhyme
மேற்கண்ட program-ல் href-ன் மதிப்பு link2.htm என்று காணப்படுவதால்
கீழ்வரும் program-க்கு நம்மை அழைத்துச் செல்லும்.
link2.htm பின்வருமாறு.
File: links2.htm
Chubby Cheeks Rhyme
Chubby cheeks, dimple chin
Rosy lips, teeth within
Curly hair, very fair
Eyes are blue, lovely too
Teacher’s pet, is that you ?
Yes! Yes! Yes!
Click here to go back to Introduction
இந்த program-ன் கடைசியில் உள்ள click here to go back to introduction
என்பதை நாம் சொடுக்கும்போது href-ன் மதிப்பு link1.htm என்றிருப்பதால், இது
நம்மை முந்தைய program-க்கே கொண்டு செல்லும்.
எனவே இதன் வெளிப்பாடுகள் பின்வருமாறு அமையும்.
[]
[]
Internal Links
ஒரே பக்கத்திற்குள் உள்ள பல்வேறு பகுதிகளுக்கு இணைப்பு தருவதற்கு Internal
Links பயன்படுகின்றன.
இங்கு இணைப்பு தர வேண்டிய பகுதிக்கு ஒரு name(பெயர்) தர வேண்டும். பின் என்று எழுதி இணைப்பு தரலாம்.
File: internallink.html
Internal Links
Goto Bottom
A big para goes here
External Links
நாம் உருவாக்கிய program-களுக்கிடையில் links-ஐ உருவாக்குவதற்கும், பல்வேறு
வலைதளப்பக்கங்களுக்கு links-ஐ உருவாக்குவதற்கும் பெரிய வித்தியாசம் ஒன்றும்
இல்லை. வெறும் href-ன் மதிப்பு மட்டுமே மாறும். பல்வேறு வலைதள
பக்கங்களுக்குமான முழுமுகவரியையும் href-ன் மதிப்பாகக் கொடுக்கும்போது, அது
நம்மை பல்வேறு வலைதளங்களுக்குக் கொண்டு செல்லும்.
இதனை நாம் பின்வரும் program-ல் காணலாம்.
File: externallinks.htm
Click here for Kaniyam
magazines
Click here for
MySQL book
send me your comments
href-ன் மதிப்பாக mailto: என்பதைத் தொடர்ந்து ஏதேனும் ஒரு் முகவரியைக்
கொடுத்தால், அந்த முகவரிக்கு மின்னஞ்சல் அனுப்பப்படும். இது மேற்கண்ட
program-ல் மூன்றாவதாக இடம்பெற்றுள்ளது. மேற்கண்ட program-ன் வெளிப்பாடு
பின்வருமாறு அமையும்.
[]
இதில் முதல் link-ஐ சொடுக்கும்போது பின்வரும் வெளிப்பாடும், இரண்டாவது
link-ஐ சொடுக்கும்போது அடுத்த படத்தில் உள்ள வெளிப்பாடும், கடைசியாக உள்ள
link-ஐ சொடுக்கும்போது எனது முகவரிக்கு ஒரு் மின்னஞ்சலும் செலுத்தப்படும்.
[]
[]
14
Frames
ஒரு் link-ஐ சொடுக்கும்போது, அதன் வெளிப்பாடு ஒரு் புதிய பக்கத்தில்
இடம்பெறாமல், அதே பக்கத்தில் இடம்பெறுமாறு செய்ய frames உதவுகிறது. இதன்
மூலம் திரையைக் குறைந்தபட்சம் இரண்டு பகுதிகளாகப் பிரித்து, முதல்
பகுதியில் links-ம் அடுத்த பகுதியில் அதற்கான வெளிப்பாடும் வருமாறு
செய்யலாம்.