HTML tutorial in Tamil

HTML tutorial in Tamil இதனுடைய guide நான் கற்றுக்கொள்வேன் what is html in tamil அதே நேரத்தில் நாம் அதைக் கற்றுக்கொள்வோம் why we need Html in tamil

What is Html (Html tutorial in tamil)

html க்கு hyper text markup language என்று அழைக்கப்படுகிறது website அது (web document) தயாரிக்க பயன்படுகிறது html க்கு Tim Berners Lee உள்ளது 1991 நான் இப்போது செய்தேன் html இல் latest version html5 க்கு website தயாரிக்க பயன்படுகிறது

(images)

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

நீங்கள் ஒரு வலைத்தள உருவாக்குநராக மாற விரும்பினால், அதாவது ஒரு வலைத்தளத்தை உருவாக்கும் பொறியியலாளர், நீங்கள் முதலில் HTML ஐக் கற்றுக்கொள்ள வேண்டும்.

இந்த விஷயத்தில், நீங்கள் எனது இணையதளத்தில் எதைப் படித்தாலும், நான் HTML உதவியுடன் எழுதியுள்ளேன், இப்போது HTML எவ்வளவு முக்கியமானது என்பதை நீங்கள் புரிந்துகொண்டிருக்க வேண்டும்.

html என்பது வலைத்தளத்தின் முதுகெலும்பு என்றும் அழைக்கப்படுகிறது. ஏனெனில் இந்த நேரத்தில் எனது வலைத்தளத்தில் நீங்கள் காணும் அனைத்து உரை, தலைப்பு மற்றும் படங்கள், நான் அதை HTML உதவியுடன் பயன்படுத்தினேன்.

எடுத்துக்காட்டாக, நீங்கள் ஒரு வலைத்தளத்தில் உரையை எழுத விரும்பினால், அதற்காக நீங்கள் கீழே உள்ள குறியீட்டைப் பயன்படுத்துவீர்கள்.

<p> எடுத்துக்காட்டாக, நீங்கள் ஒரு வலைத்தளத்தில் உரையை எழுத விரும்பினால், அதற்காக நீங்கள் கீழே உள்ள குறியீட்டைப் பயன்படுத்துவீர்கள். </p>

நாம் மேலே எழுதிய உரையை HTML இல் பார்த்திருக்கிறீர்கள், இது போன்ற ஒன்று

உரையின் தொடக்க மற்றும் முடிவு

உரையின் தொடக்கத்திலும் முடிவிலும் இதைத் தொடங்கினோம். <p></p> இது HTML குறிச்சொற்களாக எழுதப்பட்டுள்ளது. இந்த டுடோரியலில் இந்த குறிச்சொல்லைப் பின்தொடர்வோம்.

What is Hypertext markup in html in Tamil

HTML இன் முழு வடிவம் ஹைபர்டெக்ஸ்ட் மார்க்அப் மொழி என்று இந்த கேள்வி உங்கள் மனதில் இருக்க வேண்டும்.இப்போது இதன் பொருள் என்ன, எனவே இதன் அர்த்தத்தை புரிந்து கொள்வோம்.

ஒவ்வொரு வார்த்தையின் அர்த்தத்தையும் html இன் முழு வடிவத்தில் புரிந்துகொள்வோம்.

Hypertext

ஒரு வலைத்தளத்திலிருந்து மற்றொரு வலைத்தளத்திற்கு நாம் கிளிக் செய்யக்கூடிய உரை ஹைபர்டெக்ஸ்ட் என்று அழைக்கப்படுகிறது.

உதாரணமாக, உங்களிடம் இருக்கும்போது html tutorial in tamil அதன் பிறகு, கூகிள் உங்களுக்கு நிறைய வலைத்தளங்களைக் காட்டியது, ஆனால் அந்த வலைத்தளங்களில் நீங்கள் எனது வலைத்தளத்தைக் கிளிக் செய்தீர்கள்.

(images)

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

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

ஹைபர்டெக்ஸ்ட் எவ்வாறு தயாரிக்கப்படுகிறது என்பதை இப்போது நீங்கள் சிந்திக்க வேண்டும். ஹைபர்டெக்ஸ்டை உருவாக்க, நீங்கள் HTML குறிச்சொல்லைப் பயன்படுத்த வேண்டும்.  ( <a> ) பயன்படுத்த வேண்டும்

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

markup

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

(images)
எடுத்துக்காட்டாக, நாம் எந்த சாதாரண உரையையும் தைரியமாக அல்லது சாய்வாக மாற்ற வேண்டுமானால், இந்த HTML எங்களுக்கு முன் வரையறுக்கப்பட்ட HTML குறிச்சொற்களை வழங்கியுள்ளது.

நாம் உரையை தைரியப்படுத்த வேண்டும் என்றால், இதுபோன்ற ஏதாவது செய்வோம்

நாம் உரையை தைரியப்படுத்த வேண்டும் என்றால், இதுபோன்ற ஏதாவது செய்வோம்

<b>Hello world</b>

நாங்கள் இதை எழுதியவுடன், வெளியீடு இதுபோன்றதாக இருக்கும் : Hello world

உரையை சாய்வு செய்ய விரும்பினால், இதுபோன்ற ஒன்றை நாங்கள் செய்வோம்

<i>Hello world</i>

இதை நாங்கள் எழுதியவுடன், வெளியீடு இதுபோன்றதாக இருக்கும் : Hello world

History of html in tamil

(images)

HTML 1.0 : இது 1993 இல் வெளியிடப்பட்டது, அந்த நேரத்தில் பயனருக்கு தகவல் உலாவியை வழங்குவதே முக்கிய நோக்கம், ஆனால் அந்த நேரத்தில் இணையம் மிகவும் பிரபலமாக இல்லை, எனவே HTML வளரவில்லை.


HTML 2.0 : இந்த பதிப்பு 1995 இல் வெளியிடப்பட்டது, இதில் HTML 1.0 அம்சமும் அடங்கும். இந்த புதுப்பித்தலின் மிக முக்கியமான அம்சங்கள் img குறிச்சொல்லின் வருகையாகும், ஆனால் அந்த நேரத்தில் இணையம் பிரபலமாக இல்லை.

HTML 3.2 : இந்த பதிப்பு 14 ஜனவரி 1997 இல் வெளியிடப்பட்டது மற்றும் இது W3C (உலகளாவிய வலை) கட்டுப்பாட்டின் கீழ் இருந்தது. இந்த பதிப்பின் நேரத்தில், இணையம் பிரபலமடையத் தொடங்கியது. எனவே, இந்த பதிப்பில் நிறைய புதுப்பிப்புகள் இருந்தன, பல புதிய அம்சங்கள் வந்தன, இதன் காரணமாக அது மெதுவாக வேலை செய்யத் தொடங்கியது.


HTML 4.0 : இந்த பதிப்பு 18 டிசம்பர் 1997 அன்று வெளியிடப்பட்டது. இந்த பதிப்பு பல புதிய அம்சங்களைக் கொண்டு வந்தது, அவை மாதிரி வலைத்தள மேம்பாட்டுக்கு மிகவும் சிறப்பானவை.


HTML 5.0 : இந்த பதிப்பு 2012 இல் வெளியிடப்பட்டது, இந்த பதிப்பு டெவலப்பரை சக்திவாய்ந்த வலைத்தளங்களை உருவாக்க அனுமதித்தது.

What is html tag in tamil

HTML இன் இருப்பு அதன் குறிச்சொல்லிலிருந்து வந்தது. குறிச்சொற்கள் html இன் அடிப்படை. Html நீங்கள் எந்த வகையான படத்தை எழுதினாலும், HTML குறிச்சொல் அதற்கு பயன்படுத்தப்பட வேண்டும்.

HTML இல் குறிச்சொல் திறப்பு கோண அடைப்புக்குறி (<) மற்றும் மூடும் கோண அடைப்புக்குறி (>) ஆகியவற்றால் உருவாக்கப்படுகிறது.

எடுத்துக்காட்டாக (<p>)

HTML இல் உள்ள பெரும்பாலான குறிச்சொற்கள் திறந்த (<p>) மற்றும் மூடு (</p>) ஆக இருக்க வேண்டும்.

இரண்டிற்கும் இடையிலான வித்தியாசத்தை உங்களுக்குக் காண்பிக்கும் போது நாங்கள் பின்சாய்வுக்கோடானது (/) பயன்படுத்தினோம்.

எளிமையான சொற்களில், நீங்கள் HTML இல் குறிச்சொற்களை நிர்வகிக்கக் கற்றுக்கொண்டிருந்தால், நீங்கள் HTML ஐக் கற்றுக்கொண்டீர்கள்.

document structure of html in tamil

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

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

  • முதலில், உங்கள் கணினியில் ஒரு நோட்பேட் அல்லது குறியீடு எடிட்டரைத் திறக்கவும்.
  • இந்த நகலெடுக்கப்பட்ட குறியீட்டை அதில் ஒட்டவும்.
  • எடுத்துக்காட்டாக .html ஐ பெயருடன் சேர்த்து அந்த கோப்பை சேமிக்கவும் (yourname.html)
  • பின்னர் அந்த கோப்பில் வலது கிளிக் செய்து உலாவியுடன் திற என்பதைக் கிளிக் செய்யவும்.
  • உங்கள் முதல் வலைப்பக்கம் அல்லது உங்கள் முதல் வலைத்தளம் உங்களுக்கு முன்னால் இருக்கும் என்று சொல்லுங்கள்
<!DOCTYPE html> 
<html> 
<head> 
<title>My First Webpage</title> 
</head> 
<body>   
  <h1>Hello world</h1>  
  <p>i am learning html tutorial in tamil</p>
 </body> 
</html>

Output :

Hello world

i am learning html tutorial in tamil

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

  1. <!DOCTYPE html> : இது ஆவணத்தின் வகையைக் குறிக்கிறது. இது எங்களிடம் உள்ள போன்ற எந்த வகை ஆவணம் என்பதை உலாவி புரிந்துகொள்ள அனுமதிக்கிறது, இதனால் உலாவி இது ஒரு HTML ஆவணம் (HTML குறியீடு) என்பதை புரிந்து கொள்ளும்.
  2. <html> : இது html இன் ரூட் டேக் என்று அழைக்கப்படுகிறது. ஏனெனில் உங்கள் HTML இல் உள்ள அனைத்து குறியீடுகளும் அதற்குள் எழுதப்பட்டுள்ளன. இந்த குறிச்சொல் உங்கள் HTML குறியீட்டைத் தொடங்குகிறது. இந்த குறிச்சொல்லை நீங்கள் திறந்து மூட வேண்டும்.
  3. <head> : இந்த குறிச்சொல் HTML குறிச்சொல்லுக்குப் பிறகு எழுதப்பட்டுள்ளது, இந்த குறிச்சொல்லின் உள்ளே, உங்கள் வலைத்தளத்தின் அனைத்து வளங்களையும் சேர்த்து <meta> <script> <link>, இந்த குறிச்சொல் திறந்திருக்கும் மற்றும் உங்களுக்கு நெருக்கமாக இருக்கும். செய்ய வேண்டும்.
  4. <title>: இந்த குறிச்சொல் தலை குறிக்குள் எழுதப்பட்டுள்ளது. இந்த குறிச்சொல்லின் கீழ், எனது வலைத்தளத்தின் தலைப்பு இந்தியில் html டுடோரியல் என்பதால், உங்கள் வலைத்தளத்தின் தலைப்பை எழுதுகிறீர்கள். இந்த குறிச்சொல்லை நீங்கள் திறந்து மூட வேண்டும்.
  5. <body> : இந்த குறிச்சொல் HTML குறிச்சொல்லுக்குள் எழுதப்பட்டுள்ளது மற்றும் தலை குறிச்சொல்லுக்குப் பிறகு, இந்த குறிச்சொல்லின் உள்ளே, உங்கள் வலைத்தளத்தின் அனைத்து உரை, படங்கள், வீடியோக்கள், பொத்தான்கள், தலைப்புகள் மற்றும் பலவற்றை உள்ளே வைக்கலாம், அதாவது உங்கள் வலைத்தளம். எல்லா விஷயங்களும் நீங்கள் பயனருக்கு முன்னால் காட்ட வேண்டும், அதை இந்த குறிச்சொல்லுக்குள் வைக்க வேண்டும், இந்த குறிச்சொல்லை திறந்து மூட வேண்டும்.
  6. <h1> : பயனருக்கு தலைப்பைக் காட்ட இந்த குறிச்சொல்லைப் பயன்படுத்துகிறோம். இந்த குறிச்சொல்லை நீங்கள் திறந்து மூட வேண்டும்.
  7. <p> : பத்தியை பயனருக்குக் காட்ட இந்த குறிச்சொல்லைப் பயன்படுத்துகிறோம். இந்த குறிச்சொல்லை நீங்கள் திறந்து மூட வேண்டும்.

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

(images)

ஒரு HTML ஆவணம் என்ன என்பதை இப்போது இந்த படத்தின் மூலம் நீங்கள் புரிந்து கொண்டிருக்க வேண்டும்.

What is html element in tamil

html உறுப்பு உருவாக்கப்பட்டது எடுத்துக்காட்டாக தொடக்க குறிச்சொல் (<h1>) சில உள்ளடக்கம் (</h1>) இறுதி குறிச்சொல் html உறுப்பு இந்த முழு செயல்முறையினாலும் உருவாக்கப்படுகிறது.

Some html elements

start tag some content end tag
<p> Hello world </p>
<h1> My heading </h1>
<body> <h1>…</h1>
<p>…</p>
</body>
Html elements

எடுத்துக்காட்டாக, நாங்கள் 3 HTML கூறுகளையும் இன்னும் பல HTML உறுப்புகளையும் எடுத்துள்ளோம்.

Empty Html element in tamil

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

Some empty elements

start tag some content end tag
<br/> none none
<hr/> none none
empty html elements

இங்கே இது (<br/>), (<hr/>) வெற்று HTML உறுப்பு இரண்டையும் குறிக்கிறது. எடுத்துக்காட்டாக, நாங்கள் 2 வெற்று HTML கூறுகளையும் இன்னும் பல வெற்று HTML உறுப்புகளையும் எடுத்துள்ளோம்.

Nested html element in tamil

மற்றொரு HTML உறுப்பை அதன் உள்ளே வைத்திருக்கக்கூடிய உறுப்பு நெஸ்டட் HTML உறுப்பு என்று அழைக்கப்படுகிறது.

start tag some content end tag
<div> <h1>…</h1>
<p>…</p>
</div>
<h1> <ins></ins> </h1>
<body> <div>…</div>
<h1>…</h1>
<p>…</p>
</body>
<p> <i></i> </p>
nested html elements

இங்கே இது நான்கு உள்ளமைக்கப்பட்ட HTML கூறுகளைக் குறிக்கிறது. எடுத்துக்காட்டாக, நாங்கள் 4 உள்ளமைக்கப்பட்ட HTML கூறுகளையும் இன்னும் பல உள்ளமைக்கப்பட்ட HTML கூறுகளையும் எடுத்துள்ளோம்.

What is html attribute in hindi

HTML பண்புக்கூறு HTML உறுப்புக்கு சக்தியை அளிக்கிறது, இதனால் அது தனக்குள்ளேயே சில மாற்றங்களைச் செய்யலாம்.

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

தொடக்க குறிச்சொல்லில் எப்போதும் HTML பண்புக்கூறு வரையறுக்கப்பட வேண்டும். HTML இல், பண்பு இரண்டு விஷயங்களின் கலவையால் உருவாக்கப்படுகிறது. அது பெயர் மற்றும் மதிப்பு.

name : பெயர் என்பது அந்த உறுப்புக்கு நீங்கள் விண்ணப்பிக்க வேண்டியது. எடுத்துக்காட்டாக, நீங்கள் ஒரு உறுப்பில் align (position) ஐப் பயன்படுத்த வேண்டுமானால், பெயர் சீரமைக்கப்படும்.

value : மதிப்பு என்பது நீங்கள் பெயரில் விண்ணப்பிக்க வேண்டியது. எடுத்துக்காட்டாக, உங்கள் பெயர் சீரமைக்கப்பட்டால், மதிப்பை இடது வலது மற்றும் மையத்தில் வைக்கலாம்.

நீங்கள் எப்போதும் இரண்டு மேற்கோள் குறிக்கு (“”) இடையில் மதிப்பை வைக்க வேண்டும். எடுத்துக்காட்டாக (“மையம்”)

<!DOCTYPE html> 
<html> 
<head> 
<title>My First Webpage</title> 
</head> 
<body>   
   <p align="center">Hello world</p>  
   <p align="left">i am learning html tutorial in tamil</p>  
   <p align="right">i am third paragraph</p>
</body> 
</html>

Output

Hello world

i am learning html tutorial in tamil

i am third paragraph

style attribute in html in hindi

உடை என்பது ஒரு அற்புதமான அம்சமாகும், இது அடுக்கு நடைத்தாள் (CSS) சொத்தை HTML உறுப்புடன் சேர்க்க உங்களுக்கு அனுமதி அளிக்கிறது.

css என்பது ஒரு பெரிய கருத்தாகும், html தனிமத்தின் நிறத்தை பெரிதாக்கவும், உரையின் அளவை பெரிதாக்கவும் அல்லது சுருக்கவும், பின்னணி நிறத்தை மாற்றவும் மேலும் பலவற்றையும் CSS உங்களுக்கு வழங்குகிறது என்பதை புரிந்து கொள்ளுங்கள்.

Example programme

<!DOCTYPE html> 
<html> 
<head> <title>My First Webpage</title> 
</head> 
<body>  
  <p style="color:red">Hello world</p>  
  <p style="background:green">i am learning html tutorial in tamil</p>  
  <p style="font-size:32px;color:blue">i am third paragraph</p> 
</body> 
</html>

Output 

Hello world

i am learning html tutorial in tamil

i am third paragraph

How to create heading in html in tamil

HTML இல் நீங்கள் 6 வழிகளில் தலைப்பை உருவாக்கலாம், இதில் h1 மிகப்பெரியது மற்றும் h6 மிகக் குறைந்த தலைப்பு. நீங்கள் HTML இல் ஒரு தலைப்பை உருவாக்கும் போதெல்லாம், அது இயல்பாக தைரியமாக இருக்கும்.

Example programme

<!DOCTYPE html> 
<html> 
<head> 
<title>My First Webpage</title> 
</head> 
<body>     
<h1> My Heading </h1>     
<h2> My Heading </h2>     
<h3> My Heading </h3>     
<h4> My Heading </h4>     
<h5> My Heading </h5>     
<h6> My Heading </h6> 
</body> 
</html>

Output :

My Heading

My Heading

My Heading

My Heading

My Heading
My Heading

How to create paragraph in html in tamil

HTML இல் உள்ள பத்தி (<p>) குறிச்சொல் பயன்படுத்தி உருவாக்கப்பட்டது. இது ஒரு புதிய பத்தியை உருவாக்கப் போகிறோம் என்று அது HTML க்கு சொல்கிறது.

Example programme

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body>     <p> I am first paragraph </p>          <p> I am learning html tutorial in tamil</p> </body> </html>

Output :

I am first paragraph

I am learning html tutorial in tamil

How to create list in html in tamil

HTML பட்டியலின் உதவியுடன், நாம் எதையும் பட்டியலிடலாம், எடுத்துக்காட்டாக, காய்கறிகளின் பட்டியல், விலங்குகளின் பட்டியல், பழங்களின் பட்டியல்

HTML இல் நாம் மூன்று வழிகளில் ஒரு பட்டியலை உருவாக்கலாம்.

  1. ul (unordered list)
  2. ol (ordered list)
  3. dl (definiation list)

Unordered list in html

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

நீங்கள் வரிசைப்படுத்தப்படாத பட்டியலை உருவாக்கியுள்ளீர்கள், ஆனால் நீங்கள் உருப்படியைச் சேர்க்க வேண்டும் <i> list item tag பயன்படுத்த வேண்டும்.

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

Example programme

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body>     <ul>       <li>Apple</li>       <li>amazon</li>       <li>google</li>     </ul> </body> </html>

Output :

  • Apple
  • amazon
  • google

வரிசைப்படுத்தப்படாத பட்டியலில் வகை பெயரின் பண்பு உள்ளது, இதன் உதவியுடன் நீங்கள் அந்த புல்லட் புள்ளியை மற்றொரு புள்ளியாக (சதுரம், வட்டம்) மாற்றலாம்.

how to add image in html tamil

எனது வலைத்தளத்தில் நான் ஒரு படத்தை வைத்திருப்பதைப் போலவே, உங்கள் வலைத்தளத்திலும் ஒரு படத்தை வைக்கலாம்.

ஒரு படத்தை HTML இல் வைக்க, நீங்கள் படக் குறிச்சொல்லைப் படிக்க வேண்டும்.

ஆனால் படக் குறிச்சொல் மட்டுமே இயங்காது, நீங்கள் பட குறிச்சொல்லுக்குள் src பெயர் பண்புக்கூறு வைக்க வேண்டும், அதன் மதிப்பில் நீங்கள் ஒரு படத்தின் URL ஐ செருக வேண்டும்.

இங்கே url மூலம் நான் சொல்கிறேன், அதாவது அந்த படத்தை நாம் அதிகமாக்கக்கூடிய கூடுதல் நபர்கள்.

Example programme

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <img src="https://cdn.pixabay.com /photo/2017/09/25/21/13 /mushroom-2786789_1280.jpg" /> </body> </html>

Output :

आपने देखा हमने image को url की मदद से किस प्रकार add किया

अब हम image के कुछ advance feature सीखेंगे जिसमें हम

how to create table in html in tamil

HTML இல் உள்ள அட்டவணை தரவை ஒழுங்கமைக்க அல்லது தரவை அட்டவணையின் வடிவத்தில் வைக்க உதவுகிறது.

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

HTML இல் ஒரு அட்டவணையை உருவாக்க நீங்கள் அட்டவணை குறிச்சொல்லைப் பயன்படுத்த வேண்டும். ஒவ்வொரு அட்டவணையிலும் வரிசைகள் மற்றும் நெடுவரிசைகள் உள்ளன.

அதேபோல், அட்டவணை குறிச்சொல் மூலம் அட்டவணையை உருவாக்குவது html இல் வேலை செய்யாது, அதில் தரவை வைத்திருக்க வரிசை மற்றும் நெடுவரிசையை உருவாக்க வேண்டும்.

எனவே HTML இல் ஒரு வரிசை மற்றும் நெடுவரிசையை உருவாக்க <tr>and <td> tag  வரிசையை உருவாக்க பயன்படுகிறது <tr> tag and column தயாரிப்பதற்கு <td> tag பயன்படுத்த வேண்டும்

நீங்கள் கவனம் செலுத்தினால் <tr> tag என்று பொருள் table row and <td> tag என்று பொருள் table data

HTML இல் ஒரு அட்டவணையை சரியாக உருவாக்க மற்றும் அதில் உள்ள தரவைக் காட்ட நீங்கள் அட்டவணையை உள்ளே வைக்க வேண்டும் <tr> tag and <tr> tag உள்ளே <td> tag செய்ய வேண்டும் <td> tag உங்கள் தரவை நீங்கள் உள்ளே காட்டலாம்

Example programme

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body>    <table border="1">       <tr>         <td>Apple</td>         <td>Google</td>         <td>IBM</td>       </tr>       <tr>         <td>Facebook</td>         <td>Amazone</td>         <td>Flipkart</td>       </tr>     </table> </body> </html>

Output :

Apple Google IBM
Facebook Amazone Flipkart

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

எல்லை பண்புக்கூற்றின் மதிப்பு 1 ஐ நாங்கள் கொடுத்துள்ளோம், நீங்கள் கொடுக்கும் அதிக மதிப்பு, தடிமனாக இருக்கும்.

Future in html in tamil

எல்லோரும் இணையத்திற்கு வருவதால், எல்லோரும் இணைய ஏற்றம் கொண்டவர்கள், எல்லோரும் இணையத்தில் தங்கள் பிரச்சினைக்கு தீர்வு காண தேடுகிறார்கள் என்பதால் எதிர்காலத்தில் html மிகவும் பிரபலமாக இருக்கும்.

மக்களின் பிரச்சினையை தீர்க்க எந்த வலைத்தளங்கள் உருவாக்கப்படுகின்றன.

மேலும் அனைத்து வலைத்தளங்களும் HTML CSS மற்றும் ஜாவாஸ்கிரிப்ட் மூலம் உருவாக்கப்படுகின்றன, இதன் காரணமாக வலை உருவாக்குநரின் தேவை அதிகரித்து வருகிறது.

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

அல்லது நீங்கள் ஒரு ஃப்ரீலான்ஸராக மாறலாம். ஃப்ரீலான்ஸரில், வேறு சில நபர்கள் அல்லது நிறுவனம் தங்கள் சில படைப்புகளை ஃப்ரீலான்ஸர் இணையதளத்தில் வெளியிடுகிறது.

ஒரு பயன்பாட்டை உருவாக்குதல், வலைத்தளங்களை உருவாக்குதல், விளையாட்டுகளை உருவாக்குதல் போன்ற அனைவரின் படைப்புகளையும் ஃப்ரீலான்ஸரில் வெளியிடலாம்.

ஒரு ஃப்ரீலான்ஸர் அந்த வேலையைச் செய்யும்போது, ​​அந்த நபரோ அல்லது நிறுவனமோ அவருக்குப் பதிலாக பணம் செலுத்துகின்றன.

அதேபோல், நீங்கள் ஒரு வலை டெவலப்பராக மாறலாம், ஃப்ரீலான்ஸரின் வேலையைச் செய்யலாம் மற்றும் நிறைய பணம் சம்பாதிக்கலாம்.

Freelancer website : Freelancer

அல்லது உங்கள் சொந்த வலைத்தளத்தை உருவாக்கி, கூகிள் விளம்பரங்களை பகிர்வதன் மூலம் பணம் சம்பாதிக்கலாம்.

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

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

Offline coaching

உங்கள் வீட்டைச் சுற்றியுள்ள ஒரு பயிற்சி மையத்திலிருந்து வலை அபிவிருத்தி பாடத்திட்டத்தைச் செய்தால், நீங்கள் பல நன்மைகளைப் பெறுவீர்கள்.

Online class

இணைய வகுப்பின் பலனையும் நீங்கள் பெற்றிருக்கிறீர்கள், அதாவது நீங்கள் வீட்டில் உட்கார்ந்திருக்கும் வலை அபிவிருத்தி பாடத்திட்டத்தை செய்யலாம் மற்றும் ஆன்லைன் ஆசிரியர்களின் மதிப்பீடுகளைப் பார்த்து உங்களுக்காக சரியான ஆன்லைன் ஆசிரியரைத் தேர்வு செய்யலாம்.

மூலம், நீங்கள் வலை அபிவிருத்தியைக் கற்பிக்கக்கூடிய பல ஆன்லைன் தளங்கள் உள்ளன, ஆனால் எனது பார்வையில், சிறந்த ஆன்லைன் தளம்

  1. unacadmeny
  2. udemy
  3. udacity

ஆனால் இது அனைத்து இயங்குதள ஃபெஸையும் வசூலிக்கிறது, உங்களிடம் பணம் இருந்தால் அது இன்னும் கொஞ்சம் அதிகமாக இருக்கும், நிச்சயமாக இந்த பாடத்திட்டத்தில் சேரவும்.

Learn from youtube

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

Learn from books

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

Conclusion

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

இதன் மூலம் எங்கள் Html tutorial in tamil பாடம் முடிந்தது, இந்த டுடோரியலை நீங்கள் எப்படி விரும்பினீர்கள், கருத்தில் எங்களிடம் கூறுங்கள்

Happy coding

Leave a Reply