எளிய தமிழில் HTML – 1

Hyper Text Markup Language என்பதே HTML என்றழைக்கப்படுகிறது. இது ஓர் அழகிய வலைத்தளத்தை உருவாக்கப் பயன்படும் மொழி ஆகும்.HTML மொழியைப் பயன்படுத்தி gedit-ல் உருவாக்கப்படும் ஆவணமானது “.html” எனும் பெயருடன் சேமித்து வைக்கப்படும். பின்னர் இது browser-ல் திறக்கும்போது ஓர் அழகிய வலைதளமாக வெளிப்படும்.

 

gedit-ல் கொடுக்கப்படும் சாதாரண text-ஆனது ஒருசில tags-வுடன் இணைந்து hypertext-ஆக மாறுகிறது. இந்த hypertext மூலமாக browser-க்குக் கட்டளைகளைப் பிறப்பிப்பதே markup எனப்படும். இதுவே Hyper Text Markup Language எனும் பெயர் உருவாவதற்கான காரணம் ஆகும்.

HTML tags

 

ஒரு html program-க்குத் தேவையான அடிப்படை tags பின்வருமாறு:

 

<html> – முதன்முதலில் கொடுக்கப்படும் இந்த tag-ஆனது browser-க்கு இது ஒரு html கோப்பு என்பதை உணர்த்துகிறது.

 

<head> – அடுத்ததாக உள்ள இந்த tag-ஆனது browser-ன் தலைப்பை அமைக்கப் பயன்படுகிறது.

 

<title> – head-ஐத் தொடர்ந்து வரும் title எனும் tag-க்குள் அமையும் வார்த்தைகளே வலைதளத்தின் தலைப்பாக அமைகிறது. </title> எனும் tag தலைப்பு வார்த்தை முடிவுற்றதை உணர்த்துகிறது. இதன் பின்னர் </head> எனும் tag-ஐயும் நாம் முடித்துக் கொள்கிறோம்.

குறிப்பு: தலைப்பினை நீங்கள் கொடுத்தாலும், கொடுக்காமல் போனாலும், இத்தகைய tags-ஐ ஒவ்வொரு html கோப்பிலும் பயன்படுத்த வேண்டும்.

 

<body> – வலைதளத்தில் இடம்பெற வேண்டிய மொத்த சாராம்சமும் இந்த tag-க்குள் தான் அமையும். </body> எனும் tag வலைதளத்தில் இடம்பெற வேண்டியவை முடிவுற்றதை உணர்த்துகிறது.

 

இறுதியாக அமைந்துள்ள </html> எனும் tag, கோப்பு முடிவுற்றதை browser-க்கு உணர்த்துகிறது.

 

இது போன்று <html></html>,<title></title>,<head></head>,<body></body> போன்ற ஒவ்வொரு tag-ம் /-ஐத் தொடர்ந்து அதே வார்த்தைகளைப் பெற்று முடிக்கப்படுவதை இணை tags அல்லது ஜோடி tags என்பர். html-ல் இடம்பெறும் ஒவ்வொரு tag-க்கும் இணை tag என்றொன்று இருக்க வேண்டிய அவசியமில்லை. இவை இல்லாமலும் ஒருசில tags உள்ளது.

 

இப்போது இத்தகைய tags-ஐப் பயன்படுத்தி gedit-ல் உருவாக்கப்பட்ட ஒரு ஆவணத்தை பின்வரும் படத்தில் காணலாம்.

 

இந்த sample.html எனும் கோப்பு, firefox browser-ல் திறக்கப்படும்போது அது பின்வருமாறு அமைகிறது. இதில் title tag-க்குள் கொடுக்கப்பட்ட Rhymes எனும் வார்த்தை browser-ன் தலைப்பாக “Rhymes – Mozilla Firefox” என்று அமைவதை கவனிக்கவும். பின்னர் body tag-க்குள் கொடுக்கப்பட்டவை content-ஆக வெளியாகி உள்ளது.

Paragraph Tag:

 

பத்திகளை வெளிப்படுத்த உதவும் p tag-ன் முக்கியத்துவத்தை அறிந்து கொள்ள பின்வருமாரு மூன்று பத்திகளை body tag-க்குள் அடித்து அதனை browser-ல் திறந்து பார்க்கவும்.

 

இதில் body tag-க்குள் உள்ளவை browser-ல் வெளிப்பட்டுள்ளது. ஆனால் அதே வடிவில் paragraph-ஆக அவை வெளிப்படவில்லை. ஏனெனில் body tag-க்குள் உள்ளவை browser-ல் வெளிப்படவேண்டும் என்பது மட்டுமே இங்கு கட்டளை. அவை paragraphs-ஆக வெளிப்படவேண்டும் எனும் கட்டளையை அளிக்கவே இந்த <p> tag பயன்படுகிறது.

இப்போது <p> tag-ஐ ஒவ்வொரு பத்தியின் ஆரம்பத்திலும், அதனுடைய இணை tag-ஐ பத்தியின் முடிவிலும் அமைத்து கோப்பை பின்வருமாறு மாற்றவும்.

இப்போது பத்திகள் browser-ல் வெளிப்படுவதைக் காணலாம்.

align attribute:

இந்த align எனும் attribute, <p> tag-வுடன் இணைக்கப்படும்போது, அவை பத்திகளை browser-ல் எந்தப் பக்கத்தில் வெளிப்படுத்த வேண்டும் என்பதை உணர்த்தப் பயன்படுகிறது. இந்த align attribute-க்கு அளிக்கப்படும் மூன்று விதமான மதிப்புகளைப் (left, right, center) பொருத்து, அவை பத்திகளை இடதுபுறத்திலோ, வலதுபுறத்திலோ அல்லது மத்தியிலோ வெளிப்படுத்தும். இது பின்வருமாறு.

%d bloggers like this: