HTML5 – ஒரு பட விளக்கம்

HTML5 – ஒரு பட விளக்கம்அறிமுகம்

 

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

 

  • HTML5 இணையப் பக்கத்தை notepad++, gedit, vim, Kate போன்ற உரைத் திருத்திகள் மூலம் மிக எளிதாக உருவாக்கலாம். ஆவணத்தைச் சேமிக்கும் போது இணையப் பக்கமாகச் சேமித்து விட்டால் போதும்.
  • இணையப் பக்கத்தை எழுதத் தொடங்கும் போது, அது எப்படிப்பட்ட ஆவணம் எழுத வேண்டும் என்று HTML5க்கு முன், <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>என்று ஒரு சிறிய குறிப்பைக் கொடுக்க வேண்டும். ஆனால் HTML5-ல் <!DOCTYPE html> என்ற அறிவிப்பு மட்டுமே போதுமானது. வேறு எந்த விவரங்களும் தேவையில்லை. HTML5-ல் எழுதப்படும் இணைய பக்கங்கள் பழைய இணைய உலாவிகளிலும் வேலை செய்யும். அதனால் ‘5’ என்ற எண்ணைக் கூட சேர்க்கத் தேவையில்லை.

 

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

  • HTML ஆவணம் தலைப்பு (<head></head>) மற்றும் உடல்(<<body></body> என்று இரண்டாகப் பிரிக்கப்பட்டிருக்கிறது. தலைப்பில் வரும் இழைகள் உலாவிகள் இயங்குவதற்கான குறிப்புகளைக் கொண்டிருக்கும். ஆவணத்தின் உடற்பகுதியில் மற்ற எல்லா விவரங்களும் இருக்கும். இழைகளின் தொடக்கத்தை<> என்ற குறியும் இழைகளின் முடிவை </> என்ற குறியும் காட்டும். meta மற்றும் title என்று இரு முக்கியமான இழைகள் தலைப்புப் பகுதியில் வரும். இவை இணைய உலாவிகளுக்காக எழுதப் பட்டவை. meta என்னும் சொல், ஓர் ஆவணத்தைப் பற்றிய விவரங்களைக் குறிக்கும் இழையாகும். <meta charset=”UTF-8″ lang=”ta”> என்ற வரியில் charset=”UTF-8″ என்பது ஒருங்குறி எழுத்துருக்களைக் கொண்டு இருக்க வேண்டும் என்று வலியுறுத்துகிறது. lang=”ta” இணையப் பக்கம் தமிழ் மொழியில் இருக்கிறது என்பதைக் குறிக்கிறது. <meta name=”discription” content=”கணியம்“> என்பது இணைய தளத்தைப் பற்றிய விவரங்களை குறிக்கிறது. <meta name=”author” content=”கணியம்“> என்பது இணைய தளத்தின் உரிமையாளர் பற்றிய விவரங்களை குறிக்கிறது. இதையடுத்து வருவது இணைய தளத்தின் தலைப்பு. <title>கணியம்</title> என்பது தலைப்பு இழையைக் குறிக்கும். title என்ற தலைப்பு இழையை மட்டுமே கணினியை உபயோகப்படுத்துபவர்கள் காண இயலும். meta இழை பார்ப்பவர்கள் கண்களுக்குத் தெரியாது. உலாவிகளும் தேடுபொறிகளுகளும் இணையப் பக்கத்தை அடையாளம் கண்டு கொள்ள அவை பயன் படுகின்றன.

  • சாதாரணமாக HTML4-ல் இணையப் பக்கத்தின் உடலுக்கான இழை(<body>

    </body>) மட்டும் தான் இருக்கும். ஆனால் HTML5-ல் ஒரு இணையப் பக்கத்தின் உட்பொருளை நாம் உருவாக்கும் போது, அதில் பல புது இழைகள் இருக்கின்றன. அவை கட்டமைப்பு இழைகள்(structural tags) மற்றும் உட்பொருள் இழைகள்(content tags) என இரண்டு வகைப்படும். கட்டமைப்பு இழைகள், இணையப் பக்கத்தில் உள்ள சாரத்தை வகைப்படுத்தி கட்டமைக்க உதவுகிறது. கட்டமைப்பு சரியாக அமையும் போது CSS கொண்டு இணையப் பக்கத்தை அலங்கரிக்க முடியும். உட்பொருள் இழைகள், சாரத்தை தரம் பிரிக்க உதவுகின்றன. HTML4-ல் உள்ள எல்லா இழைகளுடன், இன்னும் சில புது இழைகளும் HTML5-ல் சேர்க்கப்பட்டுள்ளன. நாம் புதியதாய் சேர்க்கப்பட்டுள்ள இழைகளை மட்டும் பார்ப்போம்.

    <தொடரும்>

%d bloggers like this: