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

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