நீங்கள் ஒரு website  ஆனது உருவாக்க போகிறீர்கள் என்றால் முதலில் அதற்கான design ஐ  Photoshop அல்லது மற்ற தளங்களில் செய்திருப்பீர்கள். அதனை ஒரு site  ஆகா மாற்ற முதலில் HTML  ஆனது பயன்படும். இதனை பற்றிய ஒரு தொகுப்பை இந்த பதிவில் பார்க்கலாம். இதில் உங்களுக்கு ஏதேனும் கேள்வி இருந்தால் Comment Box இல் கேளுங்கள். இந்த HTML  ஐ நீங்கள் செய்துபார்க்க சிறந்த சைட் ஆனது w3schools ஆகும். இப்பொழுது HTML பற்றி பார்க்கலாம்.

HTML :

HTML என்பது Hypertext Markup Language ஆகும். இந்த HTML என்பது ஒரு தொடக்க நிலை coding language ஆகும். உதாரணமாக நீங்கள் ஒரு இணையதளத்தில் சென்று அதில் இன்ஸ்பெக்ட் (inspect) கொடுத்தால் அதில் முதலில் தெரிவது html ஆகும். ஒரு இணையத்தளத்தில் நாம் என்னென்ன கொடுக்க போகிறோம் என்று நினைக்கின்றோமோ (text , image) ஆகியவற்றை இந்த HTML மூலமாக மட்டுமே கொடுக்க முடியும். இப்பொழுது நீங்கள் ஒரு text ஆனது கொடுக்க நினைக்கிறீர்கள் என்றால் அதனை <p> இல் கொடுக்க வேண்டும். புகைப்படம் ஆனது கொடுக்க போகிறீர்கள் என்றால் <img> இல் கொடுக்க வேண்டும்.

உதாரணமாக

Header:

இந்த கொடுக்கப்பட்ட புகைப்படத்தில் Lightnet ஆனது Logo (image) ஆகும். அதை தவிர இதர எழுத்துக்கள் எல்லாம் text மட்டுமே. இதில் அந்த புகைப்படத்தை உள்ளே கொண்டுவர கீழ்கண்ட டேக் ஐ பயன்படுத்த வேண்டும்.

 <img src=”கணினியில் புகைப்படம் உள்ள இடம் ” alt=”example”>

இந்த டேக் இல் img ஆனது image ஐயும் src ஆனது அது இருக்கும் (location) இடத்தையும் மற்றும் alt என்பது சிலநேரம் அந்த புகைப்படமானது load ஆகாமல் இருந்தால் அதன் பெயரை குறிப்பிடவும் உள்ளது.

Body :

Heading Tag:

மேலே கொடுக்கப்பட்டுள்ள புகைப்படத்தில் “Overview” ஆனது ஒரு Heading  ( தலைப்பு ) ஆகா கொடுக்கப்பட்டுள்ளது. இதனை h டேக் மூலம் குறிப்பிடலாம். ஒரு இடத்தில் ஏதேனும் ஒரு தலைப்பு ஆனது இருந்தால் இந்த டேக் ஆனது பயன்படும். இந்த டேக் ஆனது <h1>,<h2>,<h3>,<h4>,<h5>,<h6> என முறைப்படுத்தப்படும்.

இதில் h1 ஆனது பெரிய heading ஆகவும். h6 ஆனது சிறிய heading ஆகவும் இருக்கும். மேற்கண்ட image இல் Overview  என்பது h1 டேக் ஆகும் அதனால்,

<h1>Overview</h1>

என கொடுக்க வேண்டும்.

Paragraph Tag HTML :

மேலே கொடுக்கப்பட்டுள்ள படத்தில் “Enjoy faster broadband speeds on the move with LightNet Broaband Data Card connection” ஆனது ஒரு Paragraph  ஆகா கொடுக்கப்பட்டுள்ளது. இதில் நாம்  <p> டேக் ஆனது பயன்படுத்த வேண்டும். இந்த paragraph டேக் இல் நீங்கள் text  மட்டுமே பயன்படுத்த முடியும். வேறு எந்த கருவியையும் பயன்படுத்த முடியாது.

மேலும் வாசிக்க:  What is CSS? CSS என்றால் என்ன? தமிழில்

<p>Enjoy faster broadband speeds on the move with LightNet Broaband Data Card connection</p>

பின்பு அதன் கீழே கொடுக்கபட்டுள்ள Bullet tags ஆனது எப்படி போடுவது என்று பாப்போம். அந்த Bullet Tag  போடுவதற்கான tag ஆனது,

<ul>

     <li>Superior in-building Coverage</li>

     <li>High speed across all states. Up to 3.1 Mbps (Downlink) & 1.8 Mbps (Uplink)</li>

    <li>No additional roaming charges across India</li>

    <li>Range of Unlimited, Usage-based, Time-based plans to choose from</li>

</ul> 

இதில் கொடுக்கப்பட்டுள்ள ul ஆனது “Unordered List” எனப்படும். மற்றும் li ஆனது “List Item” ஆகும். அந்த list item  உள் நமக்கு தேவையானவற்றை குறிப்பிடலாம். இதனுள் text மட்டுமல்லாமல் image உம்  பயன்படுத்தலாம்.

Insert Link HTML :

மேலே கொடுக்கப்பட்டுள்ள படத்தில் கடைசியாக நான்கு வரிகளில் லிங்க் ஆனது கொடுக்கப்பட்டுள்ளது. அந்த link  ஆனது கொடுக்க

<a href=”#”>……</a >

இதனை எப்படி பயன்படுத்தலாம் என்றால்,

<p><a href=”#”>……</a ></p>

<ul>

     <li><a href=”#”>About Broadband</a ></li>

     <li><a href=”#”>Post Paid Tariff Plans</a ></li>

    <li><a href=”#”>Pre Paid Tariff Plans</a ></li>

    <li><a href=”#”>Best Plan Selector</a ></li>

    <li><a href=”#”>Value Added Services</a ></li>

    <li><a href=”#”>Apply For Broadband</a ></li>

</ul> 

இதில் உள்ள # ஆனது destination point ஐ குறிக்கும். click  செய்தவுடன் எந்த இடத்திற்கு செல்லவேண்டுமோ அதன் link ஐ அந்த #இல் கொடுக்க வேண்டும். இது HTML இன் basic ஆகும். இந்த டேக் களை கற்றுக்கொண்டால் அடுத்து வரும் செயல்கள் எளிதாக இருக்கும். இதற்கு அடுத்து நாம் CSS என்றால் என்ன மற்றும் அதனை பயன்படுத்தும் விதத்தை பாப்போம்.

முடிவு :

இதிலிருந்து உங்களுக்கு ஒரு தெளிவானது, HTML இல் கிடைத்திருக்கும் என நினைக்கிறேன். இந்த பதிவானது உங்களுக்கு பிடித்திருந்தால் இதற்கு like மற்றும் share  செய்யுங்கள். மீண்டும் மற்றொரு பதிவில் சந்திக்குறேன். உங்களது கருது அல்லது ஏதேனும் கேள்வி ஆனது இருந்தால் அதனை comment box இல் கேளுங்கள். நன்றி.

By Admin

3 thoughts on “HTML என்றால் என்ன? விரிவாக்கம் தமிழில்…”

Leave a Reply

Your email address will not be published.