HTML Tutorial

இந்த HTML-5 tutorial-ல் basic and advanced concepts வழங்கப்பட்டுள்ளது. இது முழுக்க முழுக்க மாணவர்கள் மிக எளிமையாக புரிந்து கொள்ளும் வகையில் உருவாக்கப்பட்டுள்ளது. இதில் உள்ள ஒவொரு topic-க்கும் step-by-step clear and explanation கொடுக்கப்பட்டுள்ளது. இதன் மூலம் easy ஆகாவும், மிக வேகமாக கற்றுக்கொள்ள முடியும். நீங்கள் ஒரு new HTML leaner-ஆகா இருந்தால், beginner level-ல் இருந்து ஒரு professional level-க்கு கற்றுக்கொள்ளமுடியும். HTML உடன் CSS மற்றும் JavaScript கற்றுகொண்ட பிறகு நீங்களாகவே own attractive static and dynamic website சொந்தமாக உருவாக்க முடியும். இந்த tutorial-ல் நம்முடைய focus on HTML only.

The major points of HTML are given below:

  • HTML stands for HyperText Markup Language.
  • HTML is used to create web pages and web applications.
  • HTML is widely used language on the web.
  • We can create a static website by HTML only.

Importance of tags

HTML document முற்றிலும் tags(elements) அடிப்படையாக கொண்டது. நீங்கள் கொடுக்ககூடிய text எவ்வாறு browser-ல் தெரியவேண்டும் என்பதை இந்த tag-தான் முடிவு செயும். இதில் பயன்படுத்தும் ஒவொரு tags-ம் ஒரு தனி தன்மையை பெற்றிருக்கும். tag என்பது <tag-name> இவாறு create செய்யப்படுகிறது. இதில் ஒரு open tag <tag-name> இருந்தால் கட்டாயம் closing tag </tag-name> இருக்க வேண்டும்.

Note : சில tags-களுக்கு closing tag கிடையாது. example:<br>,<hr>,<link>,etc., html tag is not a case sensitive. You can use lower case or upper case ஆனால் lower case-ல் எழுதுவது நன்று. ஏனெனில் படிப்தற்கும், புரிந்துகொள்வதற்கும் மிக சுலபமாக இருக்கும்.

What is HTML?

HTML, an acronym for Hyper Text Markup Language. அதாவது ஒரு webpage-ஐ உருவாக்க பயன்படக்கூடிய மிக முக்கியமான markup language. இது ஒரு webpage-ல் text,image,audio and video வை browser-ல் display செய்ய பயன்படுகிறது..

Hypertext

ஒரு text-ஆனது இன்னொரு text-ஐ தனக்குள்ளே மறைமுகமாக வைத்திருக்கும். அதாவது "Go to next page , click here to apply, view details" இது போன்ற text-களை நாம் அதிகமாக பார்த்திருப்போம், அவைகளை click செயும்போது அதுவேறு ஒரு webpage-க்கு நம்மை அழைத்து செல்லும். அப்படி அழைத்து செல்ல கூடிய text or link-களை தன்னுள் வைத்திருக்கும். இதைதான் நாம் hypertext or hyperlink என்று கூறுகிறோம்.

Markup Language

இது ஒரு computer language, அதாவது ஒரு text-ஐ உனது விருப்பம்போல் attractive-ஆகா மாற்றி அமைத்துகொள்ள பயன்படுவது. அதுமட்டுமல்லாமல் ஒரு text-ஐ image,table,link, இது போன்று பலவிதமாக மாற்றி அமைத்துகொள்ள பயன்படகூடிய language தான் MarkupLanguage.

example:

“welcome”- என்ற text-ன் size-ஐ பெரிதாக மாற்ற முடியும், அதன் color மாற்ற முடியும்,

Output

Welcome

Welcome

Note: HTML இல்லாமல் ஒரு webpage-ஐ உருவாக்க முடியாது. ஒரு webpage-ன் structure எப்படி இருக்கவேண்டும் என்பதை HTML மற்றும் CSS வைத்தே நிச்சயிக்கபடுகிறது.

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My Heading</h1>
    <p>Your paragraph content!..</p>
</body>
</html>

HTML Document Explanation

  • <!DOCTYPE html> எந்த version of HTML-ல் இந்த page எழுதபட்டிருக்கிறது என்பதை browser-க்கு தெரியபடுத்துவதற்காகவே இது பயன்படுத்தபடுகிறது.
  • <html> இந்த document-ன் starting tag
  • <head> இந்த document பற்றிய meta information-ஐ பெற்றிருக்கும், example: title,style,meta information and more. இது html tag-கும் body tag-கும் இடையே தான் அமைந்திருக்கும்.
  • <title> இது html document-ன் title or name-ஐ குறிப்பிட பயன்படுத்தபடுகிறது. வழக்கமாக title எப்போதும் browser-ன் title bar-ல் display ஆகும் (at the top), அதுமட்டுமல்லாமல் browser bookmarks and search results-ம் display ஆகும். இது எப்போதும் <head> </head> tag-ல் தான் அமைந்திருகவேண்டும்/
  • <body> இது web page-ல் உள்ள அனைத்து content-களும் இந்த tag வழியாக தான் பயன்படுத்த வேண்டும்.
  • <h1> Large heading tag. இது ஒரு post-க்கு title or heading கொடுக்க பயன்படுகிறது
  • <p> Paragraph tag. உங்கள் data-வை paragraph ஆகா display செய்ய இது பயன்படுகிறது
Note: <!DOCTYPE html> எப்போதும் முதல் வரியில் தான் இடம்பெற்றிருக்கவேண்டும். இது ஒரு HTML tag கிடையாது.

Comments

vallarasu.s 9th September,2022 09:49 am
mm good usefull
raj 1st September,2022 03:42 pm
this guid usefull for me
Muhamd sharan 24th August,2022 07:05 pm
Html tmil
R.Kavipriya 23rd August,2022 08:22 pm
Epdii learn panuvanu romba bayanthen. But ipo enaku konjo theliva puriya arambikuthu.Today clg la onume theriyama muluchen. Ipo konjo confident varuthu.Unga page pathathula irunthu. Tq so much.
Nallavan 12th March,2022 07:58 pm
Arumaiyaana Vizhakam !!
udhayakumar.N 7th January,2022 09:17 pm
very nice
Hemamalini 16th December,2021 01:35 pm
Very useful, thank you
Mubassir 18th November,2021 07:41 pm
I won't to HTML notse
Prakash 27th October,2021 02:55 pm
Full notes
ijas 25th October,2021 11:52 am
رvery nice explaining
Mohan 22nd October,2021 10:49 am
Its very useful to beginners learn through tamil. Thank you.
Kaviya 1st October,2021 06:14 pm
Very.. Nice
Kaviya 1st October,2021 06:14 pm
Very.. Nice
Rajavel 22nd September,2021 10:29 pm
Sir please send me to in java tamil tutorial...
buvanezz 1st September,2021 08:56 am
hiiii
Ahil 4th July,2021 08:26 am
who is the next page
Mohamad nasik 19th November,2020 09:56 pm
its good
Rajisudhan 27th October,2020 03:57 pm
Its very useful
janani 22nd October,2020 04:52 pm
super
Vimali 16th September,2020 03:06 pm
Very Useful website Sir...
roshan 26th August,2020 11:21 am
super
hariharasuthan 27th July,2020 11:37 am
its very use full...
R. Sankaranarayanan 13th June,2020 09:46 am
Sir, Please contact me 98408 40623
Adityakrishnan 9th April,2020 03:15 pm
I am interested in this
S.I.Ahamed 27th January,2020 09:21 am
Can you give me an application for Android