HTML Tutorial 9-HTML ஆவணத்தை வடிவூட்ட(formation)
 |
| HTML Tutorial 9 |
கடந்த இடுகையில் பார்த்த அடிப்படை HTML ஆவணம். இதை மேலும் நாம் வடிவூட்டலாம்(format)
அதாவது
ஒரு ஓவியம் வரையும்போது முதலில் கோடுகளால் வரைந்துவிட்டுப் பிறகு
அவ்வோவியத்திற்கு நிழல்(Shadow) ,மற்றும் விரும்பிய வண்ணங்கலவைக் கொண்டு
மாற்றி அமைப்பதுபோலவே நமது HTML ஆவணத்தையும் வடிவூட்டலாம்.
ஹெச்.டி.எம்.எல்
ஆவணத்தை கவர்ச்சிகரமாகக் காட்ட HTML-ல் பல குறிஒட்டுகள்(TAGS) உள்ளன.
இவற்றைப் பயன்படுத்தி ஒரு ஆவணத்திலுள்ள உரையை அழகுப்படுத்துவதுடன், அதில்
படங்களையும், வண்ணங்களையும், ஒலிகளையும், காணொளிகளையும் சேர்க்கலாம்.
ஹெச்.டி.எம்.எல் ஆவணத்தை கவர்ச்சிகரமாகக் காட்ட HTML-ல் பல குறிஒட்டுகள்(TAGS) உள்ளன. இவற்றைப் பயன்படுத்தி ஒரு ஆவணத்திலுள்ள உரையை அழகுப்படுத்துவதுடன், அதில் படங்களையும், வண்ணங்களையும், ஒலிகளையும், காணொளிகளையும் சேர்க்கலாம்.
இத்தகைய வடிவூட்டல்களுக்குப் பயன்படும் குறிஒட்டுகளைப் பற்றிப்
பார்க்கலாம்.
1.தலைப்புக் குறி ஒட்டு (Heading Tags)
எழுத்துகளை
பெரிதாகவும், தடிமனாகவும் கொடுப்பதன் மூலம்
காண்போரின்
கவனத்தை ஈர்க்க
முடியும். HTML ஆவணத்தில் ஆறு அளவுகளில்
தலைப்புகளை அமைக்க முடியும். இந்த
எழுத்து அளவுகள் ஏற்கனவே
முன்வரையறுக்கப்பட்டு வைக்கப்பட்டுள்ளன. இந்த
அளவுகளை <H1>...</H1>
எனத் தொடங்கி <H6>...</H6>
வரைக் குறிப்பிடலாம்..
<H1> என்பது இருப்பதிலேயே பெரிய அளவையும், <H6> என்பதை
இருப்பதிலேயே சிறிய அளவையும் குறிக்கும்.
வேறுபட்ட அளவுள்ள தலைப்புகளை உருவாக்குவதற்காக எழுதப்பட்ட நிரல்
கீழே கொடுக்கப்பட்டுள்ளது.
<HTML><HEAD><TITLE> Heading Tags</TITLE></HEAD><BODY><H1>Heading Level 1 </H1><H2>Heading Level 2 </H2><H3>Heading Level 3 </H3><H4>Heading Level 4 </H4><H5>Heading Level 5 </H5><H6>Heading Level 6 </H6></BODY></HTML>
மேற்கண்ட கோடிங்கை ஒரு நோட்பேடில் எழுதி உங்களுக்கு விருப்பமான
பெயரில் .html என்ற விரிவுடன் சேமித்துக்கொள்ளுங்கள்.
சேமிக்கப்பட்ட கோப்பை உங்கள் இணைய உலவியில் (Internet
Browser)பிரௌசரில் திறந்து பார்க்கும்போது இவ்வாறு இருக்கும்.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
பல்வேறுபட்ட தலைப்புகளை HTML -ல் எழுதிப் பழகுங்கள்.
2. கிடைக்கோடுகள் (Horizontal Rules)
- <HR> என்ற கிடைக்கோட்டுக் குறி ஒட்டு, ஒரு கிடைக்கோட்டினை உருவாக்குகிறது.
- ஒரு ஆவணத்தின் முக்கியப் பகுதிகளைப் பிரித்துக்காட்ட கிடைக்கோட்டுக்
- குறி ஒட்டு(<HR> tag) பயன்படுகிறது.
- <HR> குறி ஒட்டைப் பயன்படுத்தி வரையப்படும் கோட்டின் தடிமனைக் கூட
- தீர்மானிக்க முடியும்.
- அவ்வாறு செய்வதற்கு <HR> குறி ஒட்டுடன் சில பண்புகளைச் சேர்க்க
- வேண்டும்.
- SIZE மற்றும் NOSHADE என்பவை <HR> குறி ஒட்டுடன் அடிக்கடி
- பயன்படுத்தப்படும் பண்புகளாகும்.
- வரையப்படும் கோட்டின் தடிமனைக் குறிக்க SIZE பண்பு பயன்படுகிறது.
- NOSHADE பண்பு வரையப்படும் கோட்டை சாம்பல் நிறத்தில் (நிழலகற்றி)
- காட்டப் பயன்படுகிறது.
- கவனிக்க: <HR> முடிவு குறி ஒட்டு இல்லை.
உதாரணமாக இந்த ஆவணத்தைப் பாருங்கள்..
<HTML><HEAD><TITLE> Horizontal Rules</TITLE></HEAD><BODY>This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules<!--கிடைமட்ட கோட்டின் தடிமனைக் காட்ட-->
<HR size="5">This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules<!-- கிடைமட்டக்கோட்டில் உள்ள சாம்பல் நிறத்தை தவிர்க்க-->
This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules<HR size="5" noshade ></BODY></HTML>
மேற்கண்ட HTML நிரல்வரிகளுக்கான வெளிப்பாடு...
This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules<HR>
<!--கிடைமட்டக் கோடு -->
This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules
This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules
This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules
This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules
மேற்கண்ட படத்தில்...
1. கிடைமட்டக்கோடு கோடு <HR>
2. கிடைமட்டக் கோட்டின் தடிமன் ஐந்து புள்ளிகள்
அதிகரிக்கப்பட்டிருக்கிறது...மேற்கண்ட வரியில்size="5" என்பதற்கு பதில்
உங்களுக்கு விருப்பமான எண்ணை உள்ளிடலாம். எண்ணின் மதிப்பு
அதிகரிக்க கோட்டின் தடிமன் அதிகமாகும்.
3. கிடைமட்டக் கோட்டில் வரும் சாம்பல் நிற நிழலை(shade)த் தவிர்க்க "no
shade" என்ற சிறப்புப் பண்பு பயன்படுத்தப்பட்டுள்ளது.
இதுபோல் நிறைய வடிவூட்டல் குறிஒட்டுகள் HTML ஆவணத்தில்
பயன்படுத்தலாம்.
