HTML5 – பட விளக்கம்-4

<body> </body>இழைக்குள் வர வேண்டிய இழைகளை இந்த இதழில் பார்ப்போம்

 

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

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

 

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

 

கீழே உள்ள படத்தில் உள்ளடக்கங்கள் எப்படி பிரிக்கப் படலாம் என்று விளக்கம் தரப்பட்டுள்ளது.

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

 

ஒவ்வோரு இழையையும் விவரமாக இனி பார்க்கலாம்.

 

முதலில் வருவது.<header></header>

இந்த இழை HTML 5ல் தான் முதலில் எழுதப்பட்டிருக்கிறது..இதற்கு முன்னால் இந்த இழை இல்லை.

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

<header>

<h1>கணியம்</h1>

<img src=”kaNiyam_logo.jpg” alt=”kaniyamLogo”>

<h6>கணியம் ஒரு தமிழ் திறவூற்று கணினி இதழ்.</h6>

</header>

 

இப்படி எழுதிய குறிகள் இணைய உலாவியால் இப்படி மாற்றிக் காட்டப்படும்.

 

 

அடுத்ததாக வருவது தலைப்புக்கள்.

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6> ஆகிய ஆறு இழைகளும் தலைப்புக்களை காட்ட HTML 5 விற்கு முன்னாலிருந்தே பயன் படுத்தப்பட்டன.

<h1></h1> என்பது அதி முக்கியமான தலைப்பையும் <h6></h6> முக்கியத்துவத்தில் கடைசி இடத்தைப் பிடித்த தலைப்பையும் குறிக்கும்.

எப்படி எழுதுவது என்று காட்டப்பட்டுள்ளது

<h1>கணியம்</h1>

<h2>கணியம் ஒரு தமிழ் திறவூற்று கணினி இதழ்.</h2>

<h3>கணியம் ஒரு இணைய இதழ்.</h3>

<h4>இந்த இதழ் தமிழ் தன்னார்வலார்களால் நடத்தப்படுகிறது.</h4>

<h5>அலுவலகம்: சென்னை</h5>

<h6>நீங்களும் பங்குகொள்ளலாமே</h6>

 

 

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

ஆனால் HTML 5ல் ஒரு ஒழுங்குமுறை வேண்டும் என்பதற்காக<hgroup> </hgroup> என்ற இழையை அறிமுகப்படுத்தியுள்ளனர். இது ஒரே இடத்தில் வர வேண்டிய தலைப்புகளைத் தொகுத்து அளிக்கிறது.

<hgroup>

<h1>கணியம்</h1>

<h2>கணியம் ஒரு தமிழ் திறவூற்று கணினி இதழ்.</h2>

 

<h3>கணியம் ஒரு இணைய இதழ்.</h3>

<h4>இந்த இதழ் தமிழ் தன்னார்வலார்களால் நடத்தப்படுகிறது.</h4>

<h5>அலுவலகம்: சென்னை</h5>

<h6>நீங்களும் பங்குகொள்ளலாமே</h6>

</hgroup>

<img src=”kaNiyam_logo.jpg” alt=”kaniyamLogo”>

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

 

 

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

இந்த இதழில் <header></header><hgroup></hgroup> என்ற இரு புதிய இழைகளைப் பற்றி தெரிந்து கொண்டோம். அடுத்த இதழில் மற்ற எல்லா புதிய இழைகளையும் பார்க்கலாம்.

%d bloggers like this: