இந்த வலைப்பதிவில் தேடு

வியாழன், 10 அக்டோபர், 2013

HTML கற்போம் - பகுதி 3

     4 comments
வணக்கம் நண்பர்களே..!! மறுபடியும் HTML கற்போம் - பகுதி 2 பதிவின் தொடர்ச்சியை தொடர்வதில் மகிழ்ச்சி. இன்று நாம் இதுவரை பார்த்த tagகள் சிலவற்றையும் வேறு சில tagகளையும் பார்போம்.

சென்ற பதிவிலே கூறியிருந்தேன் HTML coding தொடங்கும் போது <html> எனத் தொடங்கி எல்லா tag களும் போட்டு முடிந்த பின் இறுதியாக </html>
எனக் கொடுத்து முடிக்கவேண்டும் என..

இன்று உங்களுக்காக சில tag களை காட்டி அதை இடுவதன் மூலம் அது எவ்வாறு பார்ப்பவர்களுக்குத் தோன்றும் என்பதைப் பாப்போம்.

                 <p>  இந்த tag பந்தி எழுதும் போது பயன்படுவது </p>

 <em> சொல் அழுத்தத்திட்க்கு எழுதும் போது பயன்படும்..  </em>

 <h1> தலைப்புக்குப் பயன்படும் tag </h1>

 <h2> உப தலைப்பு இட பயன்படும் </h2>

 <h3>உப தலைப்புக்கு - உப தலைப்பு இடப் பயன்படும் tag</h3>
இவை ஏற்கனவே முதல் பதிவில் பார்த்தவை...

உங்கள் பார்வைக்கு ஒரு tutorial... தமிழில்.

 படத்தில் click செய்து பெரிதாக்கிப் பார்க்கவும்..



இனி மேலும் சில tag களை பாப்போம்...

<strong>Stronger emphasis.</strong>

இந்த tag மூலம் எழுத்தை தடிப்பானதாக மாற்றலாம்..

இந்த tag இவ்வாறு தான் தோன்றும்..

Stronger emphasis.

 <small>This should be in small.</small>

இந்த tag மூலம் எழுத்துகள் சின்னதாக எழுதலாம்...

இது எவ்வாறு தோன்றுமெனக் கீழே பாப்போம்...

This should be in small. 

 <em><small>Emphasised small text</small></em>

இந்த tag மூலம் எழுத்துகள் அளுத்தமானதாகவும் சிறிய அளவிலும் எழுதலாம்..

மேலே காட்டப்பட்டவாறு தான் tag எழுதும் போது எழுதவேண்டும். அதாவது முதலில் தோன்றிய <em> என்ற tag ஐ இறுதியில் முடிக்கவேண்டும்.

 <em><small>Emphasise small text</em></small>

இப்படி tag கொடுத்தல் கூடாது..
Emphasised small text
<br/> என்ற tag நாம் wordல் enter கொடுத்தால் line break ஆவது போல htmlல் அடுத்த lineக்குச் செல்லும். 

உதாரணம். :-  

 Some text<br /> and some more text in a new line
இந்த tag இப்படித்தான் தோன்றும்...


Some text
and some more text in a new line

அடுத்து இப்போது ஒவ்வொரு tagற்கான விளக்கத்திற்கும் இடையில் பிரிப்பதற்காக ஒரு கோடு இடுக்றேன் அல்லவா..?? அதை எப்படிப் போடுவது எனப்பார்ப்போம்...

<hr />

இந்த tag ஐ கொடுத்தவுடன் கோடு ஒன்று தோன்றும்.. இதோ\...


நாம் word ல் சில points களை bullets & numbering மூலம் போடுகிறோம் அல்லவா..? அப்படி போடுவதற்கான tag இதுதான்..

<ul>
   <li>A list item</li>
   <li>Another list item</li>
 </ul>
இந்தக் coding ஐ கொடுத்தால் உங்களுக்கு கீழுள்ளவாறு தோன்றும்..
  • A list item
  • Another list item
இனி 1 , 2 என HTMLல் இட...

<ol>
   <li>First list item</li>
   <li>Second list item</li>
 </ol>
இவ்வாறு தான் தோன்றும்...
  1. First list item
  2. Second list item

பயிற்சிக்காக....


இப் படத்தில் உள்ளவாறு உங்களால் Notepad ஐ பயன்படுத்தில் உங்கள் இணையஉலாவியில் தொன்றச்செய்யுங்கள்....///

நானே கூறுகிறேன்.. :)

Strong emphasis என வரவைக்க 
<strong>Stronger emphasis</strong>
என்று type செய்யவேண்டும்.

இனி Small text என எழுத சிறிய எழுத்தில் எழுத 

<small>Small text</small> 

இனி அடுத்தவரிக்குக் கொண்டு வர <br/>

என type செய்து Line shift
என type செய்து <br/> என type செய்து 

கோடு வரவைக்க <hr /> என type செய்து...

 <ul>List</ul>


 <ol>Ordered list</ol>




என type செய்து இறுதியில் வசனத்துக்கு bullet இட 
 <li>List item</li>

இதுதாங்க பயிற்ச்சியில் உருவாக்கச் சொன்னதற்கான full coding...

<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>
பொறுமையாக வாசித்த அனைத்து நண்பர்களுக்கும் நன்றி..!! தொடர்ந்து இதன் பதிவுகள் தொடரும் என்பதைத் தெரிவித்துக்கொண்டு இப்போதைக்கு விடைபெறுகிறேன்....

நன்றி 

4 கருத்துகள்: