HTML TAMIL_1 ~ Tesla Techs

எச் டி எம் எல்

இணையப் பக்கம் உருவாக்க அடிப்படையானது HTML ஆகும். இதன் விரிவாக்கம் Hypertext Marup Language என்பது ஆகும்.
நாம் காணும் ஒவ்வொரு இணையப்பக்கமும் இந்த HTMLலைப் பயன்படுத்தித்தான் உருவாக்கப்படுகிறது.
இணையப் பக்கம் உருவாக்க நிறையமொழிகள் இருப்பினும் இதுதான் அடிப்படை.
இன்னும் எளிமையாக சொல்வதென்றால் நீங்கள் பார்க்கும் இணையப்பக்கத்தினை ரைட் கிளிக் செய்து View Page Source அல்லது Page Source என்பதை கிளிக் செய்தால் ஒரு பக்கம் தோன்றும். அதில் உள்ளதுதான் இணையப்பக்கத்திற்கான அடிப்படையாம் HTML கட்டமைப்புடன் கூடிய நிரல்வரிகள்(Codings)

இணையப்பக்கம் ஒன்றிற்கான நிரல் வரிகள் :

உண்மையில் நாம் பார்க்கும் இணையதளங்களின் பக்கங்கள் மற்றும் படங்கள் அனைத்தும் இத்தகைய கோடிங்களாலேயே எழுதப்பட்டுள்ளன. பிறகு அதை நமக்கு விஷூவலாக(visual) (படங்களாக, எழுத்துக்களாக) மாற்றி அமைக்கப்பட்டு, கணினித்திரையில் இவ்வாறு இணையதளப் பக்கங்கள் காட்டப்படுகிறது.

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

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

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

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

HTML ஐ எழுதுவதற்கு நாம் ஏதாவது text editor ஐ பயன்படுத்தலாம். உதாரணமாக Notepad, Wordpad அல்லது Notepad++.

Coding எழுதுவதனை இலகுவாக்க நான் Notepad++ ஐ பயன்படுத்துகின்றேன். முதலில் உங்களது text editor இல்

<html><head>
<title>my site</title>
</head>
<body>
Hi friends! This is my first website...!
</body>
</html>

என உள்ளீடு செய்யுங்கள்.
பின்னர் இதனை save செய்யும்பொழுது Save As பாக்ஸ் இல் All types(*.*) என்பதனை தெரிவுசெய்து பின்னர் தங்களுக்கு விருப்பமான பெயரை தட்டச்சிட்டு .html என்னும் Extension இல் சேமிக்கவும்.
நான் first.html எனப் பெயரிட்டு .html விரிவுடன் சேமித்திருக்கிறேன்.
இங்கு .html என்பதுதான் இது HTML கோப்பு என்பதை நிர்ணயிக்கிறது. இது மிகவும் முக்கியமான ஒன்றாகும். பின்னர் நாம் Save பண்ணிய html file ஐ திறந்து பார்க்கும்போது

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

1. HTML ஆவணம் மற்றும் என்னும் குறி ஒட்டுகளுக்கு இடையில் இருக்க வேண்டும்.
2. என்னும் குறி ஒட்டுகள் மற்றும் என்னும் குறிஒட்டுக்குள் இடையில் இருக்க வேண்டும்.
3. மற்றும் என்னும் குறி ஒட்டுகள் என்னும் குறிஒட்டிற்குப் பின்னர்தான் எழுதப்பட வேண்டும்.
4. மற்ற அனைத்து குறிஒட்டுகளும் மற்றும் என்னும் குறிஒட்டுகளுக்கு இடையில் இருக்க வேண்டும்.
5. அனைத்து HTML ஆவணங்களும் “.htm” அல்லது “.html” என்னும் விரிவுடன்(Extension) இருக்க வேண்டும்.
6. <> என்ற குறியீடுகளுக்கு இடையில் தொடக்க குறிஒட்டு(Tag) ஆகும்.
7. என்ற குறியீடுகளுக்கு இடையில் முடிவுக் குறிஒட்டு(Tag) ஆகும்.

ஹெச்.டி.எம்.எல் ஆவணத்தை கவர்ச்சிகரமாகக் காட்ட HTML-ல் பல குறிஒட்டுகள்(TAGS) உள்ளன. இவற்றைப் பயன்படுத்தி ஒரு ஆவணத்திலுள்ள உரையை அழகுப்படுத்துவதுடன், அதில் படங்களையும், வண்ணங்களையும், ஒலிகளையும், காணொளிகளையும் சேர்க்கலாம். இத்தகைய வடிவூட்டல்களுக்குப் பயன்படும் குறிஒட்டுகளைப் பற்றிப் பார்க்கலாம்.

1.தலைப்புக் குறி ஒட்டு (Heading Tags)

எழுத்துகளை பெரிதாகவும், தடிமனாகவும் கொடுப்பதன் மூலம் காண்போரின் கவனத்தை ஈர்க்க முடியும். HTML ஆவணத்தில் ஆறு அளவுகளில் தலைப்புகளை அமைக்க முடியும். இந்த எழுத்து அளவுகள் ஏற்கனவே முன்வரையறுக்கப்பட்டு வைக்கப்பட்டுள்ளன.
<h1>என்பது இருப்பதிலேயே பெரிய அளவையும்,
<h6>என்பதை இருப்பதிலேயே சிறிய அளவையும் குறிக்கும்.
வேறுபட்ட அளவுள்ள தலைப்புகளை உருவாக்குவதற்காக எழுதப்பட்ட நிரல் கீழே கொடுக்கப்பட்டுள்ளது.

<html><head>
<title>my site</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6 </h6>
</body>
</html>

மேற்கண்ட கோடிங்கை ஒரு text editor இல் எழுதி உங்களுக்கு விருப்பமான பெயரில் .html என்ற விரிவுடன் சேமித்துக்கொள்ளுங்கள்.
சேமிக்கப்பட்ட கோப்பை உங்கள் இணைய உலவியில் (Internet Browser)பிரௌசரில் திறந்து பார்க்கும்போது இவ்வாறு இருக்கும்.