HTML அடிப்படைகள்

HTML அறிமுகம்

HTML என்பது HyperText Markup Language என்பதன் சுருக்கம். இது வலைப்பக்கங்களை உருவாக்குவதற்கான நிலையான மொழியாகும். ஒரு வலைப்பக்கத்தின் கட்டமைப்பை அல்லது எலும்புக்கூட்டை உருவாக்க HTML பயன்படுகிறது. நீங்கள் பார்க்கும் ஒவ்வொரு வலைப்பக்கமும் அதன் மையத்தில் HTML ஐக் கொண்டுள்ளது.

இதை ஒரு கட்டிடத்தின் எலும்புக்கூடு போல நினைத்துப் பாருங்கள். சுவர்கள், கூரை மற்றும் தளங்கள் எங்கே செல்கின்றன என்பதை இது வரையறுக்கிறது. பின்னர், CSS (வண்ணம் மற்றும் தளபாடங்கள்) மற்றும் JavaScript (மின்சாரம் மற்றும் பிளம்பிங்) போன்ற பிற தொழில்நுட்பங்கள் அதை அழகாகவும் செயல்பாட்டுடனும் ஆக்குகின்றன.

HTML குறிச்சொற்கள் மற்றும் கூறுகள்

HTML குறிச்சொற்களைப் (tags) பயன்படுத்தி செயல்படுகிறது. பெரும்பாலான குறிச்சொற்கள் ஒரு தொடக்கக் குறிச்சொல் (<p>) மற்றும் ஒரு முடிவுக் குறிச்சொல் (</p>) ஆகியவற்றைக் கொண்டுள்ளன. இந்த இரண்டு குறிச்சொற்களுக்கும் இடையில் உள்ள அனைத்தும் ஒரு HTML கூறு (element) என்று அழைக்கப்படுகிறது.

<tagname>உள்ளடக்கம் இங்கே வரும்...</tagname>

முடிவுக் குறிச்சொல்லில் உள்ள முன்னோக்கி சாய்வு (/) ஐ கவனியுங்கள். இது உள்ளடக்கத்தின் முடிவைக் குறிக்கிறது. சில குறிச்சொற்கள், படங்கள் போன்றவற்றுக்கு முடிவுக் குறிச்சொல் தேவையில்லை.

தலைப்புகள் மற்றும் பத்திகள்

இணையப் பக்கங்களில் உள்ள உரையை வடிவமைக்க இரண்டு பொதுவான கூறுகள் தலைப்புகள் மற்றும் பத்திகள் ஆகும்.

தலைப்புகள் <h1> முதல் <h6> வரை உள்ளன. <h1> மிக முக்கியமான தலைப்பாகவும், <h6> மிகக் குறைந்த முக்கியத்துவம் வாய்ந்ததாகவும் இருக்கும். இவை உங்கள் உள்ளடக்கத்திற்கு கட்டமைப்பைக் கொடுக்க உதவுகின்றன.

பத்திகள் <p> குறிச்சொல்லால் உருவாக்கப்படுகின்றன. இது ஒரு உரைத் தொகுதியைக் குறிக்கிறது.

<h1>இது ஒரு முதன்மைத் தலைப்பு</h1>
<p>இது ஒரு பத்தியின் முதல் வாக்கியம். பத்திகள் உரையின் முக்கிய தொகுதிகளாகும்.</p>

<h2>இது ஒரு துணைத் தலைப்பு</h2>
<p>இது மற்றொரு பத்தி. நீங்கள் விரும்பும் அளவுக்கு பத்திகளைச் சேர்க்கலாம்.</p>

பட்டியல்களை உருவாக்குதல்

HTML இல் இரண்டு முக்கிய வகை பட்டியல்கள் உள்ளன: வரிசைப்படுத்தப்படாத மற்றும் வரிசைப்படுத்தப்பட்ட பட்டியல்கள்.

வரிசைப்படுத்தப்படாத பட்டியல் (<ul>) புல்லட் புள்ளிகளுடன் கூடிய பட்டியலுக்கு இதைப் பயன்படுத்தவும். ஒவ்வொரு பட்டியல் உருப்படியும் ஒரு <li> (பட்டியல் உருப்படி) குறிச்சொல்லால் குறிக்கப்படுகிறது.

<ul>
  <li>பால்</li>
  <li>முட்டை</li>
  <li>ரொட்டி</li>
</ul>

வரிசைப்படுத்தப்பட்ட பட்டியல் (<ol>) எண்களைக் கொண்ட பட்டியலுக்கு இதைப் பயன்படுத்தவும். இங்கேயும், ஒவ்வொரு உருப்படியும் ஒரு <li> குறிச்சொல்லுக்குள் செல்கிறது.

<ol>
  <li>முதலில், கணினியை இயக்கவும்.</li>
  <li>இரண்டாவதாக, உலாவியைத் திறக்கவும்.</li>
  <li>மூன்றாவதாக, ஒரு வலைத்தளத்தைப் பார்வையிடவும்.</li>
</ol>

படங்கள் மற்றும் இணைப்புகள்

உரை மட்டும் கொண்ட பக்கங்கள் சலிப்பை ஏற்படுத்தும். படங்களையும் இணைப்புகளையும் சேர்ப்போம்.

படங்கள் ஒரு படத்தைச் செருக, <img> குறிச்சொல்லைப் பயன்படுத்தவும். இது ஒரு வெற்று குறிச்சொல், அதாவது இதற்கு முடிவுக் குறிச்சொல் தேவையில்லை. இதற்கு இரண்டு முக்கிய பண்புக்கூறுகள் தேவை:

src (source): படத்தின் கோப்பு பாதை அல்லது URL.
alt (alternative text): படம் காட்டப்படாவிட்டால் காட்டப்படும் மாற்று உரை. இது பார்வை குறைபாடு உள்ளவர்களுக்கும் முக்கியமானது.

<img src="spiderweb.jpg" alt="பனித்துளிகளுடன் கூடிய சிலந்தி வலை">

இணைப்புகள் இணைப்புகள் அல்லது ஹைப்பர்லிங்க்கள் பயனர்களை மற்ற பக்கங்களுக்கு அழைத்துச் செல்ல அனுமதிக்கின்றன. இவை <a> (anchor) குறிச்சொல்லால் உருவாக்கப்படுகின்றன. href (hypertext reference) பண்புக்கூறு இணைப்பு எங்கு செல்ல வேண்டும் என்பதைக் குறிப்பிடுகிறது.

<a href="https://ta.wikipedia.org">விக்கிப்பீடியாவைப் பார்வையிடவும்</a>

நீங்கள் இப்போது ஒரு வலைப்பக்கத்தின் அடிப்படை கட்டுமானத் தொகுதிகளைக் கற்றுக்கொண்டீர்கள். இந்த எளிய கூறுகளை இணைப்பதன் மூலம், நீங்கள் தகவல்களைத் தெளிவாகவும் திறமையாகவும் வழங்கும் பக்கங்களை உருவாக்கத் தொடங்கலாம்.

தமிழ் இணையதள வடிவமைப்பு அடிப்படைகள்