01. HTML5 මුලසිට ...

Hi Friends..

කොහොමද කට්ටියම හොදින්නේ sry වෙන්න ඕන post එක දාන්න ටිකක් late උනාට. වැඩත් එක්ක ටිකක් busy වෙලා හිටියේ.. k එහෙමනම් අපි කෙලින්ම වැඩේට බහිමු.

HTML5 යටතේ අපි සාකච්චා කරන කොටස් ටිකේ විස්තරේ පහලින් දානවා මුලින්ම එක බලල අදහසක් ගන්නකො අපි මොනාද මේ කරන්න හදන්නේ කියල :D

01. Basic Tags

02. Multimedia

03. Connectivity

04. Offline Storage

05. Device Access

06. Graphics

07. Semantics

08. Performance

09. HTML5 Tips & Techniques

10. Finally CSS3

ආයෙත් සැරයක් මතක් කරන්නම් කලින් පොස්ට් එකේදී කිව්ව වගේම ඔයාලට XHTML , CSS ගැන හොද දැනුමක් නැත්නම් මුලින්ම ඒ ටික හදාගෙන තමා මෙතෙන්ට එන්න ඕන (මේ සදහා පළමු POST එක බලන්න.) මොකද HTML5 කියන්නේ Web Technologies වලට අත්පොත් තියන්න හොද තැන නෙමෙයි. (Javascript දැනුමත් අවශ්‍යයි ඔයාල Javascript ගැන මුකුත්ම දන්නේ නැත්නම් ඒ ගැන බය වෙන්න එපා අපි අවශ්‍ය තැනේදී ඒ ටිකත් හරිගස්සන්නම්

) k එහෙමනම් අපි වැඩේ පටන් ගන්නවා අයන්නේ ඉදන්ම පටන් ගන්නම්කො.

01. Basic Tags

* File Save

HTML page කලින් Save කල විදියටම “Filename.html” OR “Filename.htm” ලෙස.

* Doctype

අපි කලින් පොස්ට් එකෙන් HTML මුලික කොටස් ඉගෙන ගන්න ලබා දුන්න Links වලින් කට්ටිය ඉගෙන ගන්න ඇතිනේ අපි HTML page 1ක් පටන් ගන්නකොටම ලියන මේ <! DOCTYPE html > කියන එකෙන් මොකද වෙන්නේ කියල k එහෙමනම් අපි බලමු HTML5 වලදී මේක වෙනස් වෙන්නේ කොහොමද කියල.

HTML 4.01 වෙනකම් <! Doctype > යෙදීම ආකාර 3කට බවිත උනා නමුත් HTML5 සමග මෙය බාවිතය ඉතාමත් සරල වී තිබෙනවා දැන් මෙය බාවිතා වන්නේ <! DOCTYPE html > යන ආකාරයෙන් පමණයි. වැඩි විස්තර යෙදීම අවශ්‍ය වන්නේ නැ.

The HTML 2 standard is:

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2 //EN”>

The HTML 3.2 standard is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD/ HTML 3.2 Final//EN”>

The HTML 4 standard is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD/ HTML 4 Final//EN”>

New HTML5 Standard is:

<! DOCTYPE html >

References:
http://www.w3.org/TR/html5-diff/#doctype
http://www.w3schools.com/tags/tag_doctype.asp

* <html> ටැගය

මෙම ටැගය යටතේ වැදගත් වෙන attribute 1ක් තම lang="" කියන එක මෙම attribute එක යෙදීම වඩාත් සුදුසුයි කියල W3C එකෙන්ම නිර්දේශ කරලා තියෙනවා අපි මෙය බාවිතයෙන් අපේ වෙබ් පිටුවේ බාශාව හදුන්වා දෙනවා මෙමගින් SEO සදහාත් සහය දැක්වීමක් සිදු කෙරෙනවා සිංහල බාෂාව සදහා මෙය බාවිතා වන අයුරු පහත උදාහරණයෙන් තේරුම් ගන්න.

<html lang=”si”> si for Sinhala, English සදහා මෙය en ලෙස බාවිතා කල හැකියි.

References:
http://www.w3.org/WAI/ER/IG/ert/iso639.htm

http://www.iso.org/iso/home/standards/language_codes.htm

http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

* <meta> ටැගය

meta Tag එකේ යෙදීමත් HTML5 වලදී වෙනස් වෙල තියෙනවා. අපි meta ටැගය බාවිතා කරන්නේ ඇයි කියලත් ටිකක් පැහැදිලි කරන්නම්කො මොකද අපේ SEO පාඩම් මාලාව සමගත් මේ meta ටැගය බොහෝ සම්බන්දකම් පවත්වන නිසා,

! අපි හදන වෙබ් site එකේ අඩංගු දේවල් සම්බන්ද සාරාංශගත විස්තරයක් අපිට මේ meta ටැගය යටතේ ඇතුලත් කල හැකියි.

! ඒ වගේම Search Engine සදහා Keywords අපිට මේ meta ටැගය යටතේ ඇතුලත් කරන්න පුළුවන්.

! ඒ වගේම වෙබ් පිටුවේ නිර්මාතෘ සහ ඒ සම්බන්ද විස්තරත් අපිට මේ meta ටැගය යටතේ ඇතුලත් කල හැකියි.

! වෙබ් පිටුව Refresh විය යුතු කාලසීමාව ලබා දීමද මේ යටතේ ලබා දිය හැකියි.

! ඒ වගේම අපේ වෙබ් page එකට එන කෙනෙක් තවත් වෙබ් පිටුවකට Redirect කිරීමද meta ටැගය බාවිතයෙන් සිදු කල හැකියි.

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">

HTML5 වලදී meta ටැගයේ බාවිතයත් පහසු කරලා තියෙනවා. මෙහිදී charset Attribute 1ක පමණක් බාවිතයෙන් Character Encoding ලබා දිය හැකියි. හොදයි අපි මෙය බාවිතයේ වැදගත්කම පිළිබද තව ටිකක් ගැබුරට සලකා බලමු. අපි charset="UTF-8" යන්නෙන් අපි වෙබ් අඩවියේ බවිතා කරන Character Encoding එක ගැන නිශ්චිතවම කියනවා මොකද වෙබ් අඩවි නිර්මාණයේදී අපිට Character Encoding කැමති ඕනෑම විදියකින් බාවිතා කරන්න පුළුවන් නමුත් Web Browsers වලට මේ හැම එකක්ම අදුනගන්න පුළුවන්කමක් නැ අන්න ඒ නිසා තම අපි නිශ්චිතවම අපි බවිතා කරන Character Encoding පිළිබද ලබා දිය යුත්තේ. මේ විදියට හරි විදියට අපි වෙබ් අඩවිය නිර්මාණය කිරීමෙන් වෙබ් අඩවියේ තියෙන අන්තර්ගතය අපිට හැම උපාංගයකින්ම එකම විදියට බල ගන්න පුළුවන්. තවත් වැදගත් කරුණක් වන්නේ අපි නිශ්චිතවම අපේ වෙබ් අඩවියේ බාවිත කරන Character Encoding ලබා දී නොමැති අවස්ථාවක Hakker කෙනෙක්ට පහසුවෙන්ම UTF-7 encoded scripts ඇතුලත් කිරීමෙන් පහසුවෙන්ම අපේ වෙබ් අඩවියේ අන්තර්ගතය අවුල් කරලා දන්නා පුළුවන් අපි දැන් ඒ ගැන වැඩියේ කතා නොකරමු මොකද එහෙම උනොත් Haking පාඩමකුත් කරන්න වෙන නිසා

. Character Encoding සදහා සාමාන්‍යයෙන් නිතරම බවිත වෙන්නේ යුනිකෝඩ් සදහා බවිත වෙන UTF-8 යන්න තමයි මීට අමතරව

ISO-8859-1 - Character encoding for the Latin alphabet

UTF-16 - Character encoding for Unicode යන Character Encoding විදිත් බාවිතා වෙනවා.

References:

http://www.w3.org/International/O-charset

http://en.wikipedia.org/wiki/Character_encodings_in_HTML

UTF-8.
http://www.unicode.org/standard/standard.html
http://www.utf-8.com/
http://en.wikipedia.org/wiki/UTF-8#Compared_to_other_multi-byte_encodings

UTF-8 and UTF-16
http://en.wikipedia.org/wiki/Unicode
http://en.wikipedia.org/wiki/Unicode_plane

හොදයි අපි එහෙනම් ඉක්මනටම ඉතිරි කොටසටත් යමු. කියල දෙන්න ගියාම බාගෙට උගන්නන්න බැරි නිසා හැම දේම වගේ කියන්න වෙනවා වැඩි දුර විස්තර අවශ්‍ය අයට තම links ටිකත් දාල තියෙන්නෙ.

* link and Script Tag

කට්ටියට මතක ඇතිනේ අපි කලින් HTML වෙබ් පිටු වලදී link and Script ටැග බවිත කරපු අයුරු එකේ විස්තර ගොඩයි නේද

, HTML5 වලදී link and Script ටැග බාවිතය ඉතාමත් පහසුයි සරලයි මෙහෙම කිව්වේ ඇයි කියල පහත උදාහරණ වලින්ම බලන්නකෝ

External Stylsheet link කිරීම.
HTML 4.01: <link rel=”stylesheet” type=””text/css” href=” Directory/Filename.css” />
HTML5: < link rel=”stylesheet” href=”Directory/Filename.css” />

External Javascript link කිරීම.
HTML 4.01: <script type=””text/javascript” src=”Directory/Filename.js”></script>
HTML5: <script src=”Directory/Filename.js”></script>

හොදයි වෙබ් පිටුවක <html> ටැගය සහ <head> ටැගය අතර බවිතා වෙන බොහොමයක් මුලික tag HTM5 වලදී වෙනස් වන ආකාරය පිලිබදව මේ පොස්ට් එකෙන් ඔයාලට කියල දුන්න. හොදයි එහෙමනම් කට්ටියම අද පාඩමේ සාරාංශය බලමුකෝ සද්ද නැතිව