professional web developer - untitled

Professional Web Developer by Ei Maung

Professional Web DeveloperTable of Contents and Sample Chapters

© Copyright 2013, Ei Maung, Fairway Web Development.

License CCBYNCSA

This document, “Professional Web Developer Table of Contents and Sample Chapters by Ei Maung” is licensed under a Creative Commons AttributionNonCommercialShareAlike 3.0 Unported License.

This document is free to share, copy, distribute and transmit. And, also allow to remix or adapt to this document. But, you must attribute the work in the manner specified by the author or licensor (but not in any

way that suggests that they endorse you or your use of the work). And, you may not use this work for commercial purposes. If you alter, transform, or build upon this work, you may distribute the resulting work

only under the same or similar license to this one.

For any reuse or distribution, you must make clear to others the license terms of this work.

THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS

PROHIBITED http://creativecommons.org/licenses/byncsa/3.0/legalcode

Table of Contents and Sample Chapters – Page: 1


မာတကာ

မတဆကWeb Applications

အခနး (၁) Web StandardsInternet, Web, W3C and HTTP

အခနး (၂) HyperText Markup Language – HTMLSemantic Data Structure (or) The Root of Everything

အခနး (၃) Cascading Style Sheets – CSSThe World without CSS is Ugly

အခနး (၄) JavaScriptThough It's All about DOM

အခနး (၅) JavaScript FrameworksIt's a Framework. No, It's just a Library.

အခနး (၆) jQueryWrite less, do more

အခနး (၇) Serverside Programing LanguagesFrom CGI to Node.JS

အခနး (၈) PHP BasicXAMPP, Form Handling and Cookie/Session Management

အခနး (၉) PHP and MySQLDatabase Driven Web Applications

အခနး (၁၀) Controlling the EnvironmentPHP and Apache Settings including URL Rewrite

အခနး (၁၁) Ajax with jQueryA New Approach to Web Applications



အခနး (၁၂) Content Management System – CMSCreating and Managing Websites? Just Piece of Cake.

အခနး (၁၃) ModelViewCollectionLet's Write Maintainable Code

အခနး (၁၄) HTML5Dream Come True for Web Developers

အခနး (၁၅) Web ServicesYou Don't Have to Do That By Yourself

အခနး (၁၆) RESTful APIEverything is Representable Already. But How about More?

အခနး (၁၇) Mobile Web99 Problems, But Mobile Ain't One.

အခနး (၁၈) Web Application SecurityPrepare Yourself. Bad Guys are Everywhere.

အခနး (၁၉) Tools and UtilitiesBe Comfortable with Your Gears

အကျဉးချပCatching Up with the Technology

နနာကဆကတ (က)Everything You Know about Open Source is Wrong

နနာကဆကတ (ခ)Picking a Web Hosting



အခနး (၁) Web StandardsInternet, Web, W3C and HTTP

အငတာနကကနပျတာနတတစလးန တစလး အချကအလကနတ အပပနအလနနပးပ နငနအာင ချတဆကထားပခငးက Network လ နခါပါ တယ။ အငတာနကဆတာ Network နတအချငးချငးချတဆကနပးထားတ Network များရ Network ပဖြစပါတယ။ တစနညး အားပဖြင တစကမဘာလးအတငးအတာန ကနပျတာနတ၊ အပခားနသော Devices နတက အပပနအလနချတဆကနပးထားတ ကနယက ကကးတစခလညးပဖြစပါတယ။

ကနနနခတနညးပညာများရ အနပခခပငမပဖြစတ ဒအငတာနကကနယကနညးပညာ စတငနပါနပါကလာနစမယ အပဖြစအပျက တစခဟာ ၁၉၅၇ ခနစ နအာကတဘာလ (၄)ရကနနမာပဖြစပားခပါတယ။ ဆဗယကယနယက ကမဘာပထမဦးဆးဂဂြ ဟတပဖြစတ စပတနစ (၁)က လတတငနငခပခငးပဖြစပါတယ။ ဒအပဖြစအပျကဟာ ကမဘာကကးကလပရားသေားနစခပါတယ။ အထးသေပဖြင အနမရကနပပညနထာငစကပါ။ အနမရကနပပညနထာငစအနနန ကမဘာပတလမးနကကာငးထက ဂဂြ ဟတလတတငဖြ ကကးစားပပင ဆငနနဆအချနမာပ သေတရ အဒအချနကမဟာဂပ ငဘကက အရငလတတငနငခတအတက တနလပသေားခရပခငးပဖြစပါတယ။

ဒအပဖြစအပျကနကကာင ARPA (the Advanced Research Project Agency) ဆတအဖြအစညးတစခက နညးပညာသေစနတ ပဂပးထထနရာကနရာကသေနတသေနလပနငရနရညရယဂပး အနမရကနပပညနထာငစကာကယနရးဌာနက စတငဖြ စညးခပါတယ။ ARPA ရ ဖြနးတးမ များထကအနကျာကကားဆးကနတာ အငတာနကပပဖြစပါတယ။

၁၉၆၀ ပပညနစမာ Joseph Licklider လ နခါတ ကနပျတာသေပပပညာရငက Man-Computer Symbiosis လ အမညနပးထားတ စာတမးတစနစာငကတငပပလာပါတယ။ အဒစာတမးဟာ Network ကနပျတာနတ တညနဆာကဖြ အတက စတကးအနပခခတစခ ပါ။ ၁၉၆၂ ခနစမာ Joseph Licklider ဟာ ARPA ရ Information Process Office ဥကက ဌအပဖြစန သေနတသေနအဖြ တစခက ဖြ စညးနပးခပါတယ။ ဒါနပမယ သေရ စတကးနတကနကာငအထညမနဖြာပဖြစခငမာပ အဖြ ကနနနတထကသေားခပါတယ။

၁၉၆၇ ခနစ နအာကတဘာလမာ ARPANET လ အမညနပးထားတ ကနပျတာ Network အစအစဉက စတငအနကာငအထည နဖြာခပါတယ။ ၁၉၆၉ ခနစ ဒဇငဘာလနရာကတအခါမာနတာ ပထမဦးဆး ကနပျတာ Network နလးခက စတငချတဆကအသေး ပပနငခကကပါတယ။ အဒပထမဆး Network နတမာသေးခတ packets switching နညးစနစဟာ ကနနထ အသေးပပနနဆပဖြစပါ တယ။

သေပမကကာခငမာ ARPANET ရ packets switching နညးစနစက ဂဗတနကတကက သေလနတ စနပါငးထားတ Network တစခပဖြစ တ JANET န Network ကမပဏတစခပဖြစတ CompuServe အပါအဝင အပခားအဖြ အစညးနတကလညး အသေးပပလာကကပါတယ။ အဒ Network နတဟာ ကနနနခတန နငးယဉရင Private Network သောသောမျသောပဖြစပါတယ။

အနပခခနညးစနစတနပမယ ကပပားပခားနားတနညးပညာဖြ စညးပနတနကကာင Network နတတစခန တစခ ချတဆကဖြ ကကးစားတ အခါမာနတာ အခကကကလာရပပနပါတယ။ ဒပပဿနာကနပဖြရငးဖြ ARPA ရ Satellite Network Packets Project မာလပနနတ Robert Kahn န စတနးဖြ တကက သေလက Vinton Cerf တ ပးနပါငးဂပး မတညတနကဝပစနစနတအတက ကကားခ Mask တစခ အနနန နဆာငရကနပးနငတ Protocol တစခကဖြနးတးနပးခပါတယ။ ၁၉၇၄ ခနစ ဒဇငဘာလမာ နဖြာထတခတ အဒနညးပညာက "Internet Transmission Control Program" လ နခါခပါတယ။ အဒ Protocol က Network လပနဆာငချက နတကနလျာချဂပး ကနပျတာကအဓကအလပလပခငးလကတ နညးစနစတစခလညးပဖြစပါတယ။ ရလဒအနနန Network နတအားလးက ချတဆက မယဆရငနတာင ချတဆကနငလာပခငးပပဖြစပါတယ။

ARPA က လအပတအပခား Software နတကပါတညနဆာကဂပး ၁၉၇၇ ခနစမာနတာ မတကပပားတနကဝပသေးခက နအာငနအာင



ပမငပမငချတဆကနငခပါတယ။ ၁၉၈၁ ခနစမာနတာ "Telecommunication Protocol/ Internet Protocol (TCP/IP)" ဆတ အမညန ဒနညးပညာကလကစသေတနငခပါတယ။ ၁၉၈၂ ခနစနရာကတအခါမာ TCP/IP က အပခားအဖြ အစညးနတကပါ စတင အသေးပပလာကကပါတယ။ တစကမဘာလးအတငးအတာန ကနပျတာ Network နတက ချတဆကနပးနတာမယ အငတာနကကကး အစပပခဂပပပဖြစပါတယ။

ကနနအချနမာနတာ အငတာနကကနယကကကးထမာ Network နတ၊ ကနပျတာနတသောမက၊ မဘငးဖြနး နတ၊ Tablet နတန အပခားနသော Device နတလညးပါဝငနနဂပပဖြစပါတယ။ ဒနနရာမာ တစခနားလညနစချငတာက အငတာနကဟာ ကနပျတာန စကပစစညးနတက ချတဆကယချတဆကနပးထားတ နညးပညာလ နားလညနစချငပါတယ။ အချကအလကအပပနအလနနပးပ ပခငး ကသေ နသောလပနဆာငချကက အငတာနကကကယတငမလပပါဘး။ ဒအငတာနကနပါမာ အနပခခဂပးတထငထားတ World Wide Web, Email စတ နညးပညာနတက နဆာငရကနပးတာပဖြစပါတယ။ Email န World Wide Web က အချကအလကနတ ခရး နရာကနအာငပ နပးတ "ကား" လ ယဆဂပး အငတာနကကနတာ အဒကားနတသေားလ ရတ "လမး" လ သေနဘာထားနငပါတယ။

World Wide Web န Email တ လပ အငတာနကလမးမကကးနပါမာ အချကအလကနတ သေယယပ နဆာင နပးနငတ အပခားနညး ပညာနတ ရပါနသေးတယ။ Instant Messaging (IM), Internet Relay Chat (IRC), Voice Over Internet Protocol (VoIP), Secure Shell (SSH), File Transfer Protocol (FTP) စတနညးပညာနတပဖြစပါတယ။

World Wide Web (WWW)၁၉၉၀ ပပညနစဝနးကျငမာ Gopher လ နခါတ အငတာနကကနယကကအသေးပပဂပး အချကအလကနတကရာနဖြပဖြန နဝနပးနငတ စနစတစခကစတငအသေးပပလာကကပါတယ။ တကက သေလနတမာ အနတာနလးကျယကျယပပန ပပန သေးခတနညးပညာတစခပါ။ တကက သေလတစခလးရ အချကအလကနတက တစနနရာတညးမာစစညးထားနငဂပး Gopher စနစန ကနပျတာနတကဆကသေယ ရယနငပခငးပဖြစပါတယ။

Gopher က မငနဆးတားတကက သေလကဖြနတးခတာပါ။ ၁၉၉၃ ခနစ နဖြနဖြာဝါရလမာ အနပခအနနနတက နပပာငးလသေားနစနငတ ဆးပဖြတချကတစရပက မငနဆးတာတကက သေလကချမတခပါတယ။ Gopher နညးပညာက အသေးပပသေနတကအသေးပပခနပးရမယ လ နကကပငာခပခငးပပဖြစပါတယ။ ဒနကကပငာချကနကကာင လကရ Gopher နညးပညာအသေးပပနနသေနတက အပခားနညးပညာတစခခ နပပာငးသေးဖြ စဉးစားစရာပဖြစလာနစပါတယ။

အဒအချနမာ ဆစဇာလနနငငအနပခစက CERN (The European Council of Nuclear Research Center) ဆတအဖြ အစညးမာ လညး Gopher က အစားထးနငတနညးပညာတစခကအသေငရနနပါတယ။ CERN က Tim Berners-Lee က Document နတ အတငးမာအပခား Document နတက ကးကားချတဆကနငတနညးပညာတစရပက ဖြနတးနနပါတယ။ Hypertext Document လ သေကနခါပါ တယ။ လကနတ အသေးပပနငဖြ အတက၊ Document နတက ကနပျတာတစလးထမာ စစညးထားဂပး ပဖြန နဝနပး နငတ Server Software တစခန အဒ Document နတကဖြတနငတ Browser Program တစခကလညးဖြနတးခပါတယ။ ဖြနတး မအားလးကစနပါငးဂပး "WorldWideWeb" လ သေကအမညနပးခပါတယ။

၁၉၉၃ ခနစ၊ ဧဂပလ (၁၃) ရကနနမာ WorldWideWeb နညးပညာရ Source Code က အများရယနငဖြ နဖြာပပနပးခပါတယ။ ဒါနကကာင ဒနညးပညာကမညသေမဆ အခမရယအသေးပပခငရလာပါတယ။ ဒါဟာလညး နညးပညာအလညအနပပာငးတစခက ပဖြစနပါနစခတဆးပဖြတချကတစခပါပ။ အဒနစထမာပ အနမရကနပပည နထာငစက NCSA (National Center of Supercom- puting Applications) က Hypertext Document နတကကကညရနငဂပး Gopher ကလညး ဆကလကအသေးပပနငတ Web Browser Program တစခကဖြနတးခပါတယ။ Mosaic လ အမညနပးခပါတယ။ အစပငးမာကတာ Unix Operating System မာ အသေးပပနငဖြ ဖြနးတးခတာပါ။ ဒါနပမယ ၁၉၉၃ ခနစ ဒဇငဘာလမာ Mac န Windows တ မာပါ အသေးပပနငတ Version နတက ဖြနတးနပးခပါတယ။ အဒအချနကစဂပး Mosaic န WorldWideWeb ဟာ အလျငအပမနနကျာကကားလာခပါတယ။

Mosaic ကသေ Web Browser နတလညး တစခဂပးတစခနပါနပါကလာခပါတယ။ အများစကနတာ တကက သေယနတ Corporate နတရ သေနတသေနပနရာဂြျကအနနန နပါနပါကလာခတာပဖြစပါတယ။ ကနနအချနမာနတာ Web လ အတနကာကနခါတ World Wide Web ဟာ အငတာနကလမးမကကးနပါမာ အချကအလကနတသေယယပ နဆာငနပးနငတ နညးပညာများထက အဓကအကျ



ဆးနညးပညာပဖြစလာခဂပပဖြစပါတယ။

Web နညးပညာမာ အဓကအစတအပငး (၃) ခပါဝငပါတယ။

1 Hypertext Documentကနနအချနမာ Web Document လ ပဂပးအနခါများတ Hypertext Document နတဟာ စာန နရးသေား နဖြာပပထားတအချက အလကနတအပပင၊ စာရငးဇယားပစ Table န နဖြာပပထားတအချကအလကနတ၊ ရပပ (Image) နတန အချက အလကနတပဖြည သေငးလ ရတ Form နတ ပါဝငနငတ Document များပဖြစပါတယ။

ဒ Document နတဟာ Hyperlink လ နခါတ အညနးနတအသေးပပဂပး အပပနအလနချတဆကနငကကပါတယ။ Hyperlink တစခကနပဂပး Document တစခကနနနနာက Document တစခက အလယတစက ကးနပပာငးကကညရ နငမာပဖြစပါတယ။ ကျနနတာတ Web Developer နတရ အဓကအလပကနတာ အနပခခအားပဖြင Web Document များ ဖြနတးတညနဆာကပခငးပ ပဖြစပါတယ။

2 Web ServerWeb Server ဆတာ Web Document နတက ကနပျတာတစလးန စစညးသေမးဆညးထားဂပး ပပနလည ရယလတအခါရယနင နအာင စမနပးထားတစနစတစမျ းပဖြစပါတယ။ Document နတ စစညးထားပက အခနးနတအများကကးပါတကနဒတကကကးတစလး န တပါတယ။ Web Document နတကနတာ အဒတကကကးထမာရနနတအခနးနတဆပါစ ။ ကနဒတကကကးမာလပစာရသေလ အခနးတငးအတကလညး ကယပငအခနးနပါတနတရပါတယ။ Web နညးပညာမာနတာ တကလပစာက Domain Name လ နခါ ဂပး အခနးနပါတအညနးက URL (Uniform Resource Locater) လ နခါပါတယ။ Web URL တစခဟာ အမလပစာတစခန အနတာနလးတပါတယ။ ပ (၁-က) မာ နလလာကကညပါ။

ပ (၁-က) URL တစခ၏အဓပပါယ

ပမနအားပဖြင တကနပါတပဖြစတ Domain Name သေရငရပါဂပ။ ကျနတ အနသေးစတ အခနးလပစာကနတာ တကနရ နရာကမ ကကညလညးပဖြစပါတယ။ ဥပမာ - google.com ဆတ လပစာသေဂပဆရင၊ Image Search, Maps, Reader, News အစရတ အခနးနတက google.com ရ မျကနာစာ (Home Page) နရာကနတာမကကညဂပးဆကသေားလ ရပါတယ။ URL ဆတာ Web ရ



"အသေက" ပဖြစပါတယ။ Web Resource တငးက တကရကညနးဆနငတ URL တစခရရမယ၊ ရနအာငဖြနတးနပးရမယဆတာက Web Developer တငး နားလညထားဖြ လပါတယ။

3 Web Browserပထမဆး Web Browser ပဖြစတ Mosaic အမညရတ Browser ကနတာ ကနနအချနမာမရနတာပါဘး။ ဒါနပမယလသေးအများဆး Browser နတထက Microsoft Internet Explorer န Mozilla Firefox တ ဟာ Mosaic ကနနဆငးသေကလာကကတာပဖြစတယ လ ဆနငပါတယ။

လကရအချနမာလသေးများတ Web Browser (၅) ခ ရပါတယ။ Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari န Opera တ ပဖြစကကပါတယ။ မဘငးဖြနးနတန Tablet နတကနနလညး အငတာနက အသေးများလာကကတ အတက Android Browser, Mobile Safari န Opera Mobile တ လ Mobile Browser နတကလညး အသေးများတ Web Browser စာရငးထမာထညသေငးရပါမယ။

Web Browser တစခရ အနပခခလပငနးတာဝနကနတာ၊ အသေးပပသေနပးတ URL လပစာအတငး Web Server ရရာကသေားဂပး၊ Web Server ကပပနနပးလကတအချကအလကနတက အသေးပပသေကကညရ နငနအာင နဖြာပပနပးဖြ ပပဖြစပါတယ။

ပ (၁-ခ) Web Browser တစခ၏ အလပလပပImage Credit: www.vladstudio.com /wallpaper/?how_internet_works

ကနနနခတမာ နညးပညာအရရပနထးဂပးစလငလတ Web Application နတ Web Service နတ အမျ းမျ း ရနနနပမယ Web နညးပညာဆတာဟာ Web Document နတကတစခန တစခ အပပနအလနချတဆကထားဂပး၊ Document တစခချငးစက URL များအသေးပပဂပး တကရကညနးဆနငပခငးပပဖြစတယလ အနပခခအားပဖြင မတယရမာပဖြစပါတယ။



World Wide Web Consortium (W3C)Web နညးပညာက စတငတထငခတ Tim Berners-Lee က World Wide Web Consortium (W3C) ဆတ အဖြ အစညး တစရပက ၁၉၉၄ ခနစ နအာကတဘာလမာဦးနဆာငတညနထာငခပါတယ။ ဒစာနရးနနချနအထလ ဒါရကတာအပဖြစဆကလက ဦးနဆာငနနဆပဖြစပါတယ။ တညနထာငခတနနရာကနတာ အနမရကနနငင မကဆာချးဆကနညးပညာတက သေလ ကနပျတာသေပပ ဌာန (MIT/LCS) မာပါ။ ဥနရာပသေမမဂြန အငတာနကကတညထငခတ DARPA (Defense Advanced Research Projects Agency) တရ အကအညန တညနထာငခတာပဖြစပါတယ။

W3C ရ အဓကလပငနးတာဝနကနတာ Web Document နတနရးသေားဖြနတးကကသေနတ၊ Web Server တထငဖြနတးကကသေနတ၊ Web Browser ထပလပသေနတအပါအဝင Web နညးပညာန ဆကစပအလပလပ သေများ လကနာအသေးပပရမယနညးပညာစများ သေတမတပခငးပပဖြစပါတယ။ ဒလနညးပညာစနတ သေတမတရာမာလညး W3C က အဂမတမးပညာရငနတသောမက Google, Microsoft, Mozilla, Apple, Adobe, Opera အစရတ လကရအငတာနကန Web နညးပညာမာဦးနဆာငနနတလပငနးများက ပညာရငများလ ပးနပါငးပါဝငနဆာငရကနနကကတာပါ။

W3C က သေတမတထားတစနတက Web Standards လ နခါဂပး HTTP, CGI, HTML, XHTML, XML, SOAP, DOM, CSS, SVG, RDF စသေပဖြင ကဏဍနပါငးများစာပါဝငပါတယ။ အဒထက ကျနနတာတ အဓကထားနလလာရမာနတကနတာ HTTP, HTML, CSS န DOM တ ပဖြစပါတယ။

HyperText Transfer Protocol (HTTP)ပ (၁-က) မာ URL ရ နရ ဆးက http:// က "စးသေားရမယကားလငး" လ နဖြာပပခပါတယ။ HTTP ဆတာ Web Document နတအပါအဝင အချကအလကနတက Web Server န Web Client ရ ကကားထမာ အပပနအလနသေယယပ နဆာငနပးတ နညးပညာ ပဖြစပါတယ။

Web Client ဆတာအနပခခအားပဖြင Web Browser ကပနပပာတာပါ။ ဒါနပမယ Browser အပပင အပခား Client များလညးရပါ တယ။ ဥပမာ - Mobile Phone မာ Install လပဂပးသေးလ ရတ Facebook App ဆကကပါစ ။ App က ဖြနးထမာ Install လပထား နပမယ နဖြာပပတအချကအလကနတက Facebook Web Server ကနနသေားယဂပးမနဖြာပပနပးနငတာပဖြစပါတယ။ Facebook App ဟာ Browser မဟတနပမယ Web Server ကအချကအလကနတကရယနဖြာပပနငတ Web Client တစမျ းပပဖြစပါတယ။ သေလညး Web Server န ဆကသေယဖြ အတက HTTP နညးပညာကပအသေးပပရတာပါ။

Web Client က အချကအလကများရယဖြ နဆာငရကတလပငနးစဉက Request လပတယလ နခါဂပး၊ Web Server က အချက အလကများ ပပနလညနပးပ တလပငနးစဉက Respond လပတယလ နခါပါတယ။ တစနညးအားပဖြင Web Client က အချက အလကများနတာငးယပခငးက အဓကနဆာငရကမာပဖြစဂပး Web Server ကနတာ နတာငးခလာတအချကအလကများ ပပနလညနပး ပ ပခငးက အဓကနဆာငရကမာပဖြစပါတယ။

HTTP ကနတာ အချကအလကရယလသေ Client န အချကအလကနပးပ သေ Server တ အကကား အပပနအလန နားလညလကနာ ရမယ နညးပညာစကသေတမတနပးထားပခငးပပဖြစပါတယ။

Client RequestHTTP သေကမတချကအရ Web Client တစခဟာ အချကအလကရယလရင Web Server ထက ရယလ နကကာငးသေတငးနပးပ ရမာပဖြစပါတယ။ နပးပရမယ Format ပစနမနာကဒလပါ -

GET /foo.html HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 Accept-Encoding: gzip, deflate If-Modified-Since: Tue, 26 Feb 2013 05:34:16 GMT



ဒ သေတငးနပးပ ချကက Request Header လ နခါပါတယ။ ပထမဆးလငးက GET က Request Method လ နခါပါတယ။ HTTP မာ GET, POST, PUT, DELETE စတ Request Method နတ အမျ းမျ းရပါတယ။ အချကအလကရယလတရညရယ ချကနပါမတညဂပး သေငနတာတ Request Method က ထညသေငးနပးပ ရမာပဖြစပါတယ။

အနပခခအားပဖြင အချကအလကနတ ရယလရင GET ကသေးရပါတယ။ အချကအလကအသေစနတ Server မာဖြနတးနစလရငနတာ POST ကသေးရပါတယ။ Server မာ ရနနတအချကအလကနတ ပပငဆငနစလရငနတာ PUT ကသေးရဂပး၊ အချကအလကနတ ပယဖြျကနစချငရင DELETE ကသေးရပါတယ။ HEADER, DEBUG, TRACK, TRACE စတ အပခား Request Method နတလညးရပါနသေးတယ။ ဒါနပမယ လပခ နရးပပဿနာရပခငး၊ အသေးပပရနလကနတ မလအပပခငးစတအချကအချ နကကာင အသေး နညးပါတယ။ Request Method နတအနကကာငးက အခနး (၈) PHP Basic န အခနး (၁၆) RESTful API တ မာ ဆကလက နဖြာပပဦးမာပဖြစပါတယ။

Request Method နနာကမာရယလတ Document URL က နဖြာပပရပါတယ။ URL နနာကမာမအသေးပပလတ HTTP Version က ဆကလကနဖြာပပနပးရတာပါ။ နမနာ Request Header ရ ဒတယလငးကနတာ Server လပစာပဖြစဂပး တတယလငးပဖြစတ User-Agent ကနတာလကရနတာငးယသေ Client အမျ းအစားက ထညသေငးနဖြာပပနပးပခငးပပဖြစပါတယ။

ဒါအပပင စတတထ လငးမာ ပဖြညစကလကခနငတနညးပညာအချ ကပါ အသေအနပးတအနနန ထညသေငးနပး ထားတာကနတ ရပါလမ မယ။ ဒပဖြညစကနညးပညာနတအနကကာငးက အခနး (၁၀) Controlling the Environment မာ ဆကလကနဖြာပပနပးပါမယ။

နမနာ Request Header ရ နနာကဆးလငးကနတာ၊ အခနတာငးယတအချကအလကဟာ နပးထားတရကစနနာကပငး Server နပါမာ နပပာငးလပပငဆငထားမသော ပပနလညနပးပ ပါလ အသေနပးထားတာပဖြစပါတယ။ ဒါဟာ HTTP ကသေတမတထားတ Request Format နမနာတစခပဖြစပါတယ။ နတာငးယတ Client န နတာငးယရပခငး ရညရယချကနပါမတညဂပး ပါဝငတအချက အလကနတ ကပပားသေားနငပါတယ။

အသေးပပသေတစနယာကက Web Browser ရ Address Bar မာ URL တစခက ရကထညလကရင Web Browser က HTTP Request Format အပဖြစအလအနလျာကနပပာငးဂပး Server ထနပးပ နပးမာပဖြစပါတယ။ ဒလပနဆာငချကဟာ နနာကကယမာ နဆာငရကသေားတာပဖြစလ ကျနနတာတ မပမငရပါဘး။ နတ ပမငလတယဆရင Developer Tools နတကအသေးပပနငပါတယ။ ကျနနတာအသေးပပတ Tool ကနတာ LiveHTTPHeader လ နခါတ Firefox Addon ပပဖြစပါတယ။

ပ (၁-ဂြ) LiveHTTPHeader Firefox AddonLink: livehttpheaders.mozdev.org



ဒ Tool က Client န Server ဆကသေယတအခါ အပပနအလနသေတငးနပးပ ရယသေားတအချကအလက အနသေးစတက နဖြာပပနပး နနမာပဖြစပါတယ။

Server RespondWeb Server က Hardware Server န Software Server အပဖြစ နစပငးခကကညဖြ လပါတယ။ Hardware Server ဟာ အနပခခ အားပခင HTTP န တကရကသေကဆငပခငးမရပါဘး။ Linux, Microsoft Windows Server စတ Server Operating System တစခ Run နနဂပး Web Document န အပခားလအပတ File နတက သေပဆညးနပးထားတ Physical Machine တစခပဖြစ ပါတယ။

Software Server ကမ HTTP Request နပါမတညဂပး သေငနတာတအချကအလကပပနလညနပးပ နငနအာင ဖြနတးတညနဆာက ထားတာပဖြစပါတယ။ Apache, Nginx, IIS (Microsoft Internet Information Service) တ ဟာ အသေးအများဆး HTTP Web Server Software နတပဖြစကကပါတယ။

မတချက ။ ။ Physical Machine ပဖြစတ Hardware Server Computer တစလးထမာ Web Server အပပင အပခား Software Server နတ ရနနနငပါနသေးတယ။ Email Server, FTP Server, SSH server စသေပဖြငပဖြစပါတယ။ သေကဆငရာ Server တစခချငးစက ဝငနပါကအမတ (Port Number) နတ ခပခား သေတမတနပးထားပါတယ။ ဒါမ ဘယအနပါကကဝငလာတ Request ဆရင ဘယသေက တာဝနယနဆာငရကရမလ ဆတာကသေနငမာပဖြစပါတယ။ HTTP Web Server အတက Default Port No. ကနတာ 80 ပဖြစပါတယ။ ဝငနပါက 80 က ဝငနရာကလာတ Request အားလးက HTTP Web Server က တာဝနယနဆာငရကနပးသေားမာပဖြစပါတယ။ အသေးပပသေက Browser Address Bar မာ URL ထညသေငးတအခါမာ Port No. က ထညမနပးခရင Browser က 80 ကပ အလအနလျာက အသေးပပနပးသေားမာ ပဖြစပါတယ။ Web Server တစခက Port No. နပပာငးဂပး Setting လပပက အခနး (၁၀) Controlling the Environment မာနဖြာပပနပးပါမယ။

Web Server တစခရ အဓကအလပကနတာ Request တစခလကခရရတာန Request Header န အတပါဝငလာတ သေတငးနပးပ ချကအတငး သေငနတာတ အချကအလကက ပပနလညနပးပ ဖြ ပပဖြစပါတယ။ ထးပခားချကကနတာ အချကအလကကပပနလညမနပး ပ ခင သေကလညး Client လပထကသေတငးနပးပ ချကတစချ အရငနပးပ ပါနသေးတယ။ ဒါက Respond Header လ နခါပါတယ။ HTTP Respond Header နမနာတစခကနဖြာပပနပးလကပါတယ။

HTTP/1.1 200 OK Date: Mon, 04 Mar 2013 14:03:18 GMT Server: Apache/2.2.14 (Unix) PHP/5.3.1 Last-Modified: Sun, 03 Mar 2013 20:15:33 GMT Content-Encoding: gzip Content-Length: 1448 Content-Type: text/html; charset=utf-8

Respond Header ရ ပထမဆးလငးက အနပခအနနက Status Code နပါတသေးဂပးနဖြာပပနပးတာပဖြစပါ တယ။ 200 OK ရ အဓပပါယကနတာ လကခရရတ Request ဟာ အားလးအဆငနပပဂပး အချကအလက ပပနလညနပးဖြ လညးအသေငပါပဆတ အဓပပါယပဖြစပါတယ။

HTTP Status Code နပါတနတအများကကးရပါတယ။ အပစ (၅) စခပခားထားဂပး (1xx) န စတ Code နတကနတာ သေတငးနပးပ ရနသေကသေကပဖြစပါတယ။ (2xx) န စတ Code နတကနတာ Request/Respond နအာငနအာငပမငပမငနဆာငရကနငနကကာငး နဖြာပပတ Code နတပဖြစပါတယ။ (3xx) န စတ Code နတကနတာ Redirect လ နခါတ လပစာနပပာငးလသေားနကကာငးသေတငးပ တ Code နတပဖြစပါတယ။ (4xx) န စတ Code နတကနတာ Client Error ကနဖြာပပတ Code နတပဖြစပါတယ။ တနညးအားပဖြင နပးပ လာတ Request အမားနကကာငပဖြစနပါလာတ Error နတကနဖြာပပနပးတာပါ။ (5xx) န စတ Code နတကနတာ Server Error အတကပဖြစပါတယ။ Web Server က Request က အဆငနပပနပပလကခရရနပမယ အခကအခတစစတစရာနကကာင ပပနလညနပးပ နငပခငးမရတအခါ နဖြာပပတ Code နတပဖြစပါတယ။ HTTP Status Code နတထကနတ ရနလရတ Code အချ အနကကာငးထညသေငးနဖြာပပလကပါတယ။

200 OK – လကခရရတ Request အဆငနပပဂပး နတာငးခထားတအချကအလကနတက ပပနလညနပးပ နတာမာပဖြစနကကာငး



နဖြာပပတ Code ပဖြစပါတယ။

301 Moved Permanently – နတာငးခလာတ အချကအလကဟာ တစပခားနနရာတစခက အဂပးတငနပပာငးနရရေ ထားနကကာငး နဖြာပပတအခါသေးပါတယ။ Client ကနနာကတစကကမ Request လပရင နပပာငးနရရေ သေားတ URL န Request လပသေငနကကာငး အသေနပးပခငးလညးပဖြစပါတယ။

304 Not Modified – နတာငးခလာတအချကအလကဟာ Request Header မာ If-Modified-Since: မတချကန အတပါဝငလာတရကစနနာကပငး Server နပါမာအနပပာငးအလမရနသေးနကကာငး နဖြာပပဖြ သေးပါတယ။

307 Temporary Redirect – နတာငးခလာတအချကအလကဟာ အပခားတစနနရာက ယာယနရရေ နပပာငးထားနကကာငး နဖြာပပတအခါသေးပါတယ။ 301 န ကာတအချကက တစချနမာပပနလညနရာကရလာမာပဖြစလ နနာက Request နတက အခလကရ URL အတငး ဆကလကနဆာငရကနငနကကာငး အသေနပးတသေနဘာပဖြစပါတယ။

403 Forbidden – Request က လကခရရနပမယ Client ဟာ အချကအလကရယပငခငရသေ မဟတတအတက ပပနလညနပး ပ မာမဟတနကကာငး နဖြာပပပခငးပဖြစပါတယ။

404 Not Found – နတာငးခလာတ အချကအလကက Server မာရမနနနကကာငး နဖြာပပပခငးပဖြစပါတယ။

500 Internal Server Error – မညသေညအနကကာငးနကကာငမနး အတအကျမသေရတ Server Error တစခ ပဖြစနပါနန တအတက အချကအလကပပနလညနပးပ နငမာမဟတနကကာငး နဖြာပပတာပါ။

503 Service Unavailable – ယာယ Server Error တစခ ပဖြစနနတအတက ပပနလညမနပးပ နငနသေးနကကာငးနဖြာပပတ Code ပဖြစပါတယ။ အများအားပဖြင အသေးပပသေသေပများနနတအချန၊ Web Server ယာယ Down နနတအချနနတမာနဖြာပပတ Code ပါ။

အပခား Status Code နတအနကကာငးကပါ အပပညအစက ဆကလကနလလာလတယ ဆရငနတာ Wikipedia ရ List of HTTP Status Codes Article မာ ဆကလကနလလာနငပါတယ။

Link: http://en.wikipedia.org/wiki/List_of_HTTP_status_codes

Respond Header မာ ပပနလညနပးပ မယ အချကအလကန သေကဆငတ အပခားအချကနတလညးပါဝငပါနသေးတယ။ နမနာ Respond Header မာ ပပနလညအနကကာငးပပနတ Server ရ အမျ းအစား၊ ပပနလညနပးပ မယ Content Size န အချကအလက အမျ းအစားတ ကပါ ထညသေငးနဖြာပပနပးတာက နတ ရမာပဖြစပါတယ။

အချကအလကကပပနလညလကခရယမယ Browser က နပးပ လာတ Respond Header သေတငးပ ချက နပါမတညဂပး လအပ သေလဆကလကနဆာငရကသေားမာပဖြစပါတယ။ ဥပမာ - Browser နတဟာ Web Content တစခကလကခရရဂပးရင နနာငပပန လညအသေးချနငနအာငသေမးဆညးထားနလရပါတယ။ Cache လပတယလ နခါပါတယ။ ပပနလညနပးပ လာတ Respond Header မာပါဝငလာတ Modified Date န သေသေမးဆညးထားတ Cache ထက Content ရ Modified Date နငးယဉကကညဂပး ကာပခား ပခငးမရရင Server က ပပနပ တာကမနစာငနတာပ သေမးထားတ Content က နဖြာပပလကနငပါတယ။ ဒနညးန အသေးပပသေက ပထမတစကကမရယထားဖြးတ Content က နနာကတစကကမထပမရယလတအခါ ပဂပးပမနပမနဆနဆနရရမာပပဖြစပါတယ။

Browser နတဟာ အနပခခအားပဖြင Text, HTML, Image စတ Content အချ ကနဖြာပပနငနပမယ မနဖြာပပနငတ Content နတလညးရပါတယ။ ဥပမာ - Microsoft Excel File တစခက Web Browser ကနဖြာပပနပးနငမာမဟတပါဘး။ ဒနတာ Respond Header မာပါလာတ Content-Type ကလညး Browser ကကကညပါတယ။ သေနဖြာပပနငတ Content အမျ းအစားဆရင အသေးပပသေကကညရနငနအာငနဖြာပပလကမာပဖြစပါတယ။ မနဖြာပပနငတ Content အမျ းအစားဆရငနတာ အသေးပပသေရယနငနအာင



Download လပရန နပးလကမာပပဖြစပါတယ။

ဒလ သေတငးနပးပ ချကနတအပပနအလနနပးပ ပခငးအားပဖြင Client န Server ဟာ ဆကသေယနဆာငရကနငမာပဖြစပါတယ။ HTTP ကနတာ နဆာငရကရမယအဆငနတ၊ နပးပ ရမယသေတငးနပးပ ချကအမျ းအစားနတက သေတမတနပးထားတ Web Standard တစခပပဖြစပါတယ။

Pull TechnologyHTTP ဟာ Pull Technology တစမျ းပဖြစပါတယ။ Pull Technology ဆတာ Client န Server ဆကသေယတအခါမာ Client ကသော ဆကသေယမ ကဦးဆးစတငတ နညးပညာကနခါတာပဖြစပါတယ။ Server က Client ဆကသေယလာတအခါမသော သေငနတာ သေလအနကကာငးပပနနပးတာပါ။ Pull Technology မာ Server က ဆကသေယမ တစခကအစပပတယဆတာမရပါဘး။

ပ (၁-ဃ) HTTP အလပလပပ

ဒါဟာလညး ရးရငးနပမယ နလလာစ Developer နတ သေတလတတကတအချကပဖြစပါတယ။ URL ဟာ Web Development ရ နပါတ (၁) အနပခခပဖြစတယဆရင၊ Client Request မလပပ Server Respond ဆတာ ရမာမဟတဘးဆတအချကက နပါတ (၂) အနရး အကကးဆးအနပခခအချကပပဖြစပါတယ။

Pull Technology ဟာ ရးစငးတအတက Web Application နတနရးသေားရပခငးဟာ တစပခားနသော Full-Duplex လ နခါတ Client-Server နစခစလးက ဆကသေယမအစပပနငတ Network Application နတ ဖြနတးရပခငးထကပမလယကပါတယ။ ဒါနပမယတစခါတစရ Real-Time Application လ နခါတ စကက န မလပအချကအလကနတနပပာငးလနနဖြ လအပတ Application နတအတကနတာ ဒ Pull Technology က အကန အသေတပဖြစနနတကပပနပါတယ။ ဒါကနပဖြရငးဖြ အတက Long-Polling, Web Sockets စသေပဖြင နညးလမးနတရပါတယ။ အဒနညးပညာနတအနကကာငးကနတာ အခနး (၁၄) HTML5 မာ ဆကလကနဖြာပပပါမယ။

Stateless ProtocolStateless Protocol ဆတာဟာ Client န Server ဆကသေယမတစကကမန တစကကမ ဆကနယပခငးမရတ နညးပညာကနခါတာပဖြစ ပါတယ။ တနညးအားပဖြင Request/Respond State က ထမးသေမးထားပခငးမရဘးလ ဆလတာပါ။ HTTP ဟာ Stateless Protocol တစမျ းပဖြစပါတယ။ Client က Resource A က နတာငးခမယဆရင Server က Resource A က နပးပါလမမယ။ Client က နနာကတစကကမအနနန Resource B က နပးပါဦးလ နတာငးခမယဆရင Server က Resource B က နပးမာပါပ။ ပထမအကကမ Resource A အတက လပခတဆကသေယမ န နနာကတစကကမ Resource B အတက ထပလပတဆကသေယမ တ ကကားမာ ဘယလဆကစပမ မျ းမမရတသေနဘာပဖြစပါတယ။ A နတာငးရင A ကနပးတယ၊ B နတာငးရင B က နပးတယ၊



ခပရငးရငးပအလပလပသေားတာပဖြစပါတယ။

တစချ မပဖြစမနန ထမးသေမးထားဖြ လတ State နတအတက Cookie, Session အစရတနညးပညာနတအသေးပပနငပါတယ။ Cookie န Session များစမပကနတာ အခနး(၈) PHP Basic မာနဖြာပပနပးပါမယ။ ဒနနရာမာနတာ HTTP ဟာသေဘာဝအရ Pull Technology တစမျ းပဖြစဂပး Stateless သေဘာဝလညးရတယဆတအချကက အထးပပမတသေားထားနစချငပါတယ။



အခနး (၂) HyperText Markup Language HTMLSemantic Data Structure (or) The Root of Everything

HTML ဆတာ W3C က သေတမတထားတ Web Document နတ တညနဆာကတအခါ လကနာအသေးပပရမယ Document နရးသေားပနရးသေားနညးပပဖြစပါတယ။ Web Document တစခဟာ HTML Element နတစစညးထားတ Text Document တစခပပဖြစပါတယ။

ပ (၂-က) HTML Element တစခ၏ဖြ စညးပ

ပ (၂-က) မာ HTML Element တစခရ ဖြ စညးပက နဖြာပပနပးထားပါတယ။ HTML Element နတမာ Open Tag န Close Tag ဆဂပး အဖြငအပတရပါတယ။ အဒအဖြငအပတကကားထမာ Tag Content တညရဂပး Open Tag ရ အတငးထမာ Element Attribute တစခ သေ မဟတ တစခထကပဂပး ရနငပါတယ။ Close Tag န Content မရပ Open Tag န Attribute နတသောပါတ Empty Tag နတလညးရပါတယ။

၁၉၉၁ ခနစက အဒလ Element (၁၈) မျ းပါဝငတ Document နရးသေားနညးက HTML – HyperText Markup Language ရယလ World Wide Web နညးပညာကတထငခတ Tim Berners-Lee ကပ စတငတထငခတာပဖြစပါတယ။ အဒ (၁၈) ခထက (၁၁) ခဟာကနနထဆကလကပါဝငအသေးပပနနဆပဖြစပါတယ။ HTML2.0 အနနန အများအသေးပပနငဖြ စတငနကကပငာနပးခတာ ကနတာ ၁၉၉၄ ခနစ၊ နဝငဘာလမာပဖြစပါတယ။ အဆငဆငပပငဆငမနတ ပပလပလာခဂပး အခဒစာနရးနနချနမာ ကျယကျယ ပပန ပပန အသေးပပနနတာကနတာ ၁၉၉၉ ခနစ ဒဇငဘာမာ နကကပငာခတ HTML 4.01 ပပဖြစပါတယ။ အနာဂြါတမာ ပဖြညစကနညး ပညာနတများစာပါဝငလာတ HTML5 ကအသေးပပကကမာပဖြစနပမယ၊ ဒအခနးမာနတာ ပဂပးအနပခခကျတ HTML 4.01 က အရင နဖြာပပချငပါတယ။ HTML5 ကနတာ အခနး (၁၄) မာ ဆကလကနလလာသေားပါမယ။

Semantic WebHTML Element နတအနကကာငးမနလလာခင Semantic Web ကအရငဆးနားလညထားဖြ လပါတယ။ Semantic ဆတာ သေတမတစညးမျဉးက တတကျကျလကနာထားတအတက စနစကျနနတ Web Document နတကဆလတာပဖြစပါတယ။ သေတမတ စညးမျဉးန အည စနစကျနအာငတညနဆာကထားမသော Web Document နတဟာ လတစနယာကဖြတရနားလညနငယမက ကနပျတာကလညး Process လပနငမာပဖြစပါတယ။ W3C က HTML က ဖြနတးတနနရာမာလညး ဒလရညရယချကန ပ ဖြနတးထားတာပဖြစပါတယ။

လတစနယာကဟာ Web Document တစခအတငးမာ ဘာနတပါလညးသေချငရင မျကစန ကကညဂပးဖြတရ နလလာမာပါ။ ဒါနပမယ ကနပျတာကနတာ အဒ Document ထမာ ဘာနတပါလဆတာသေရဖြ အတက Process လပယဂပးနားလညရတာပဖြစပါတယ။ ကနပျတာဆတာ Processing Power ရနပမယ သေငမနပးရငဘာမမတကတာ အားလးအသေပါ။ Web Browser, Search Engine Spider အစရတကနပျတာ Software နတက သေတမတစညးမျဉးနတ သေငထားနပးတအတက Web Document တစခက ဖြတယ



တနနရာမာ အဒစညးမျဉးနတန တကဆငကကညဂပး နားလညရတာပဖြစပါတယ။ ဒါနကကာင ကျနနတာတ တညနဆာကတ Web Document နတဟာ သေတမတစဉမျဉးန မညရင ကနပျတာက Process လပနငတ Semantic Document ပဖြစမာမဟတပါဘး။

နလလာစ Web Developer နတဟာ Web Document နတတညနဆာကတအခါ "လနတဖြတလ ရဖြ" က အဓကဦးတညဂပး တညနဆာကကကနလရပါတယ။ Web Document တစခဟာ ကနပျတာကလညး Process လပနငဖြ လညးလတယဆတအချကက သေတလတ နမနလျာတကကကပါတယ။ Web Document တစခဟာ Text Document သောပဖြစလ စညးမျဉးနတန မကကညလညး လနတအတကနတာ ဖြတလ ရနနနငတာပပဖြစပါတယ။ ဒါနပမယ အဒ Document က အနပခခဂပးနတာ ကျနနတာတ ကတစပခား Process နတ လပရဦးမာပါ။ အနပခခပဖြစတ Document စနစမကျခရင Google လ Search Engine န Web Browser နတက ကျနနတာတ Document က အပပညအဝနားမလညတ ပပဿနာရနငသေလ၊ ကျနနတာတ ကယတင ဆကလကနရးသေားရမယ CSS န Style နတသေတမတပခငး၊ JavaScript န Element နတစမခန ခပခငး ကစစနတကနဆာငရကတအခါ အခကအခနတန နတ ရမာ ပဖြစပါတယ။

ဒါနကကာင HTML န ပကသေကရငကျနနတာတ ဟာ ကနပျတာကနားလညနငတ Data Structure တညနဆာကနနပခငးပဖြစတယ ဆတအသေဟာ ပထမဦးဆးလအပချကပပဖြစပါတယ။ သေပရပလပနအာင ဘယလပစနဖြာပပမယ၊ လနတရ မျကစမာပသောဒပဖြစနအာင ဘယလဖြနတးမယဆတကစစဟာ HTML ရ တာဝနမဟတပါဘး။ လကနတ မာ လပလ လညးမရပါဘး။ ဒါဟာ နနာကအခနးမာ ဆကလကနလလာမယ CSS လ နခါတ Style Language ရ တာဝနပပဖြစပါတယ။

Semantic Web ရ အနရးပါပက ပဂပးနပါလငနစဖြ Browser War န XHTML အနကကာငးထညသေငးနဖြာပပလပါတယ။

Browser Warပထမဦးဆး Web Browser ပဖြစတ Mosaic ကတထငခတ Marc Andreessen န Jim Clark တ နစနယာကဟာ NCSA က ထကဂပး Mosaic Communications ဆတ လပငနးတစခကတညနထာငခပါတယ။ နနာကပငးမာ Netscape Communications Corporation လ အမညနပပာငးဂပး Netscape Navigator ဆတ Web Browser ကဖြနတးခကကပါတယ။ Netscape Navigator ရ Version 1.0 က ၁၉၉၄ ခနစ ဒဇငဘာလမာ နကကပငာခပါတယ။

အဒအချနမာပ NCSA ရ အဖြ ခတစခပဖြစတ Sypglass Inc. က Mosaic Browser ရ လငစငက Microsoft ကနပးလကပါတယ။ ၁၉၉၅ ခနစ ဩဂြတလမာ Mosaic Browser ကအနပခခထားတ Microsoft Internet Explorer စတငနပါနပါကလာပါတယ။ ဒါနကကာငနရ အခနးမာ Microsoft Internet Explorer န Mozilla Firefox တ ဟာ မလပထမ Browser ပဖြစတ Mosaic ကနန ဆငးသေကလာကကတယလ နပပာခတာပဖြစပါတယ။ Mosaic Source Code က အသေးပပထားတာမဟတနပမယ Mosaic က တထင ခသေနတ ဖြနတးထားတ Netscape Navigator ဟာ နနာကပငးမာအဓက Browser တစခပဖြစလာတ Mozilla Firefox ရ အစ ပဖြစပါတယ။ တစချနတညးမာပ နနာနဝဆကသေယနရးလပငနးတစခပဖြစတ Telenor ကလညး Opera Web Browser ရ ပထမဆး Version က စမးသေပထပလပခပါတယ။ ဒါနကကာင Opera ဟာ နရးအကျဆး Browser နတထကတစခလ ဆနငဂပး ကနနထလညး Opera ရ သေကနရာကမနတ Web Standards ထမာရနနဆပဖြစပါတယ။

အဒအချနကစဂပး အသေးပပသေနတန Developer နတက အဂပ ငအဆငဆနဆာငနငဖြ Web Browser နတက သေ ထကငါနကာငးဖြ ကကးစားကကရငး Bowser War စတငနပါနပါကလာပါတယ။

Opera ကနတာ အဂပ ငအဆငထမာ ဒနလာက ပပငးပပငးထနထနမပါနပမယ Microsoft န Netscape တ ကနတာ အနတာနလးဂပ င ခကကတာပဖြစပါတယ။ နစဖြလးရ အဓကဦးတညချကက သေတ Web Browser မာ လပနဆာငချကအသေစနတ အပခားသေထကဦး နအာငထပထညဖြ ပပဖြစပါတယ။ တစဦးထကတစဦးကသောဖြ က အဓကဦးတညနနရတအတက အတတစကပးနပါငးဂပး တညတ စတစခရနအာငညနငးဖြ ဆတာ သေပမစဉးစားကကပါဘး။

အဒအချနကာလနတဟာ Web Developer နတအတက စတအညစရဆးအချနနတပပဖြစပါတယ။ Web Document တစခ တညနဆာကချငရင Document တစခတညးကပ နစမျ းခဂပးတညနဆာကနပးရနလ ရပါတယ။ Internet Explorer အတက တစမျ း၊ Netscape အတကတစမျ း နစမျ းခဂပးတညနဆာကရတသေနဘာပဖြစပါတယ။ တစခါတစရ Browser တစခတညးအတက



ရညရယတညနဆာကဂပး "ဒ Document က တစပခား Browser န မကကညရ" လ သေတမတရတာနတလညး ရခပါတယ။ ကနန နခတလ Major Browser (၅) ခအပါအဝင အပခား Browser နလးငါးဆယနလာကရတနခတမာသော အဒလ ပဖြစနနနသေးရင Developer နတအတကနတာ မနတးရစရာပါပ။

ဒလကစစနတမာတညနအာငညနပးမယ Web Standard အဖြ W3C ရနနနပမယလညး အစပငးမာ Web Standard နတက သေရလကနာသေအနတာနလးနညးခပါတယ။ ၁၉၉၈ ခနစနရာကတအထ Internet Explorer န Netscape တရ ယဉဂပ ငမ Browser War နအာကမာ Web Development နလာကဟာဖြရဖြရပဖြစနနခရတာပပဖြစပါတယ။ ဒါနတအားလးဟာ သေတမတ စညးမျညးနတရနနနပမယ လကနာဖြ တာဝနရတသေနတက လကနာဖြ ပျကကကတအတကနကကာင ပဖြစပျကခရတာလညး ပဖြစပါတယ။ Web Developer နတအတက Browser War ကတစမျ း၊ အဒ Browser War နကကာင မပဖြစပဖြစနအာင ဖြနတးရတအတက စနစမကျပဖြစနနတ Web Document နတကတစသေယန ခကခတကာလနတပပဖြစပါတယ။

၁၉၉၈ ခနစမာနတာ Professional Web Developer နတန ဖြ စညးထားတ Web Standard Project (WaSP) ဆတအဖြ အစညးတစရပ နပါနပါကလာဂပး Web Standard ရ အနရးပါပက နဖြာထတနပပာဆလာခပါတယ။ အဓကရညရယချကကနတာ Microsoft န Netscape တ က W3C Web Standard နတက တတကျကျလကနာနအာငတနးအားနပးဖြ ပပဖြစပါတယ။ Web Developer နတန Browser ထတလပသေနတအားလး Web Standard က တစညတစညာလကနာကကမသော ကက နတ နနရတ ပပဿနာနတ နပပလညမာပါ။ WaSP ရ နရးသေားနဖြာပပမနတဟာ အငတာနကမာအလျငအပမန ပပန န လာတအတက Web Developer နတအပါအဝင အငတာနကအသေးပပသေနတအနနန Web Standard ရ အနရးပါပက ပမသေရနားလညလာကကပါတယ။

၂၀၀၀ ပပညနစနရာကတအခါမာ Microsoft က Mac အတက Internet Explorer 5 က နကကပငာခပါတယ။ အဒ Browser အသေစ မာ Web Standard က အနတာနလး လကနာလာလ ဒါဟာအနရးပါတကာလတစခလ ဆနငပါတယ။ WaSP က Netscape က လညး Navigator 5 ကမပဖြန နသေးပ Web Standard က အတငးအတာတစခထလကနာနငဂပဆမသောပဖြန ဖြ ဖြအားနပးခပါတယ။

တစချနတညးမာပ Wired, ESPN အစရတ Website နတကစဂပး သေတ Website နတက Web Standard န အည နပပာငးလ တညနဆာကလာခကကပါတယ။ ၂၀၀၃ ခနစမာနတာ CSS Zen Garden ဆတ Website တစခနပါလာခဂပး HTML Content က ထစရာမလပ CSS Style Language ကသေးဂပး Website တစခလးရ Design က အမျ းမျ းနပပာငးလ ရနကကာငး လကနတ ပပသေခ ပါတယ။ Web Developer နတအထးစတဝငစားကကဂပး ဒါဟာ Web Design နလာကကတစနခတဆနးနစခတ ဖြနတးမလညး ပဖြစခပါတယ။

၂၀၀၄ ခနစကနရာကလာတအခါ Web Standard က နကာငးနကာငးလကနာထားတ Mozilla Firefox ရ ပထမဆး Version ထကလာခပါတယ။ အဒနစထမာပ Google က Gmail ကစတငနကကပငာခပါတယ။ Gmail ဟာ Web Standard တစခပဖြစတ JavaScript န DOM က အဓကအသေးပပဂပး တညနဆာကထားပခငးပဖြစပါတယ။ အဆငပမင Application နတက JavaScript န ဒလတညနဆာကနငပါလားလ Web Developer နတအတကစနမနာယစရာ Application တစခလညးပဖြစလာနစခပါတယ။ ၂၀၀၄ ခနစ နစကနပငးနလာကမာနတာ O'Reilly Media က Tim-O'Reilly က Web2.0 စတစကားလးက စတငမတဆကခ ပါတယ။ အဒနနာကပငးကစဂပး Web2.0 ဆတနကကးနကျာသေနအာကမာ Web Standard န တညနဆာကထားတ Application နတတစခဂပးတစခနပါနပါကလာခပါနတာတယ။ Web Application နတ စတငတစနခတဆနးခတကာလနတပပဖြစပါတယ။

ကနနအချနမာနတာ အဓက Web Browser အားလးက Web Standard က အနတာနလးတညစာ လကနာလာကကဂပပပဖြစ ပါတယ။

HTML vs. XHTMLW3C ဟာ Web Standard က သေတမတနပးတ အဖြ အစညးတစခပဖြစပါတယ။ Web Standard က သေတမတရပခငးရညရယချက က Web Industry ထမာရတပါဝငသေအားလး နညးပညာအရညညတရမယ နနရာနတမာညနနနအာင စသေတမတချကနတသေတမတ နပးပခငးအားပဖြင ညနငးနပးဖြ ပဖြစပါတယ။ နဖြာပပခဂပးပဖြစတ Browser War ကာလမာ Internet Explorer န Netscape တ က W3C က သေတမတနပးထားတ Web Standard အတငးမဟတပ အဂပ ငအဆငတထငထညသေငးထားတလပနဆာငချကနတ ကယစရခကကပါတယ။ တစချ လပနဆာငချကနတက တစဦးကတစဦးတပရငး အလလညသေားတာနတလညးရပါတယ။



ဥပမာ <font> ဆတ HTML Element ကသေးဂပး Web Document တစခမာပါဝငတ စာသေားနတက စာလးပစနပပာငးတာ၊ စာလးအနရာငနပပာငးတာနတလပနငပါတယ။ အဒ <font> Element ဟာ W3C ရ Standard ထမာ မပါပါဘး။ Netscape ကတထငအသေးပပထားတာပဖြစပါတယ။ ဒါနပမယ အဒ <font> Element က Internet Explorer ကပါ အသေအမတပပလာတ အတက Web Developer နတက Document နတတညနဆာကတအခါ ထညသေငးအသေးပပမယဆရင Internet Explorer မာပါ အလပလပလာပါတယ။ W3C ရ ပထမရညရယချကက တညနအာငညနပးဖြ ပဖြစပါတယ။ အခလအလလညဂပးသေား ကစစနတက ညဂပးပဖြစလ Standard ထက ထညသေငးအသေအမတပပနပးရတသေနဘာလညးရပါတယ။

HTML 3.0 နရာကလာတအခါ မလစမာမပါနပမယ IE န Netscape တ တစညတညးသေးနနတအတက ထညသေငးနပးရတ HTML Element နတ အနတာများလာခဂပပဖြစပါတယ။ ဒလထညသေငးနပးလကတအတက HTML ရ မလရညရယချကကလညး တစပဖြညးပဖြညးထခကလာပါတယ။ HTML ဆတာဟာ Semantic Data Structure တညနဆာကဖြ အတကဆတ ရ နဒါငကနန အပမငလတ Document နတတညနဆာကဖြ အတက ဆတဘကက ဦးတညလာတသေနဘာပဖြစပါတယ။

HTML 4.0 န 4.01 ကနရာကတအခါမာနတာ ပပနပပငလ မရနငနတာနလာကနအာင HTML ဟာ Semantic Data Structure ဆတရနဒါငကနန နဝးကာလာဂပပပဖြစပါတယ။ HTML န နရးသေားထားတ Web Document ဆတာဟာ Web Application နတရ အနပခခ Data Structure မဟတနတာပ Font အမျ းမျ း၊ စာလးအနရာငအမျ းမျ းန Text Format လပထားတ Document သောသောပဖြစလာပါနတာတယ။ Browser Support အားနညးမဟာအဓကအချကပဖြစနပမယ ဒလလမားတအနပခခ Concept နတဟာ လညး အဒကာလနတမာ အဆငပမင Web Application ရယလ နပပာပနလာကနအာငနပါထကမလာပခငး အနကကာငးရငးတစခပဖြစ ပါတယ။

W3C အနနန အနပခအနနနတကထမးညဖြ မပဖြစမနနလအပလာပါတယ။ ဒါနပမယ HTML 4 .01 မာ ထညသေငးထားဂပးသေား Element နတကနနာက Version မာပပနပဖြတပပစလ လညးမရပါဘး။ လကရ HTML 4.01 က အသေးပပနရးသေားထားတ Website နတအများကကးရနနဂပပဖြစတအတက ပဖြတပပစလကရင လကရ Website နတန Compatible မပဖြစနတာပ Backward Compati- bility ကထခကမာပ ပဖြစပါတယ။ ဒါနကကာင W3C က HTML ကမပပငနတာပ XHTML လ နခါတသေးပခား Markup Language တစခက ၂၀၀၀ ပပညနစ ဇနနဝါရလမာနကကပငာခပါတယ။ XHTML မာ ပါတ X ဟာ eXtensible ဆတအဓပပါယပဖြစပါတယ။ W3C ကပ တထငထားတ Data Model Language ပဖြစတ XML နရးသေားပအတငးနရးသေားရမာပဖြစဂပး ပဂပးစနစကျတ HTML လ လညးဆနငပါတယ။

HTML မာ ထညသေငးထားတ Semantic မပဖြစတ Element နတက XHTML မာ ပဖြတထပပပစခဂပး စညးမျဉးစညးကမးနတက လညးပမတငးကကပလကပါတယ။ ဥပမာ - XHTML မာ Element Tag နတအားလးက စာလးနသေးန ပနရးရမယလ သေတမတ ပါတယ။ HTML မာနတာ စာလးအကကးအနသေး နစသေကရာန နရးလ ရသေလ အမျ းမျ းလညးနရးကကပါတယ။ XHTML မာ Element တငးအတက Close Tag ပါဝငရမယလ သေတမတပါတယ။ Close Tag မရတ Empty Element နတကလညး Self-Closing Element အပဖြစ နဖြာပပသေတမတရမယလ သေတမတပါတယ (ဥပမာ - <br /> <img />)။ Attribute Value တငးကလညး Quote အတငးထမာ ထညသေငးရမယလ သေတမတပါတယ (HTML: <img src=pic.jpg> vs. XHTML: <img src="pic.jpg" />)။ စသေပဖြင အပခားသေတမတချက နတလညးရပါနသေးတယ။ လရငးကနတာ XHTML ဟာ HTML မာမားခတအမားနတက ပပပပငဖြယထပဂပး Semantic Web Document နတတညနဆာကဖြ အတက ရညရယဖြနတး လကတ Markup Language တစမျ းပပဖြစပါတယ။

WaSP ရ ဦးနဆာငမန Web Standard လပရားမနတပပလပနနစဉမာ Web Developer နတဟာ XHTML ကသော Web Document နတတညနဆာကဖြ အသေးပပခကကဂပး အပခား Developer နတကလညး XHTML ကသောအသေးပပဖြ အားနပးမနတ ပပလပခကကပါတယ။

WaSP လပရားမန XHTML ဟာ Semantic Web Document န Browser နတရ Web Standard Support က များစာ သေကနရာကမရခတာပပဖြစပါတယ။ တငတငကျယကျယ အသေးပပခတ XHTML ဟာ Version 1.1 ပဖြစဂပး Version 2 အနနန နတာထပမထကနပါလာခပခငးမရပါဘး။ ဒစာနရးနနချနထ W3C နကကပငာချကများအရ ထပမထကနပါဖြ လမရနတာပါဘး။


XHTML 2.0 အစား HTML5 ကသော အနာဂြါတ Web Document များအတက တစခတညးနသော Markup Language အပဖြစအသေးပပကကရနတာမာ ပဖြစပါ တယ။

HTML5 မာ ရညရယချကနကာငးနတရခတ XHTML သေတမတချကနတက နပါငးစပထညသေငးထားဂပး မလ HTML 4.01 အသေးပပထားတ Website နတအတကလညး Backward Compatible ပဖြစနအာင စမထားပါတယ။ HTML5 အနကကာငး နပပာစရာများစာရတအတက ဒနနရာမာ အကျယမချ နတာပါဘး။ အခနး (၁၄) ကျမသော သေးပခားထပမနဆးနနးမာပဖြစပါတယ။ အခနတာ ကျနနတာတ သေဖြ လတ HTML Element တစချ က ဆကလကနလလာချငပါတယ။

HTML SkeletonHTML Document တစခ ပဖြစနပမာကနစဖြ အတက အနညးဆးလအပချကကနတာ Document Type Declaration ပပဖြစပါတယ။ ဒတစခပါရင HTML Document လ ဆနငပါဂပ။ ဒါနပမယလညး လကနတ မာ ဂပးပပညစတ HTML Document တစခဟာ အနညးဆးနတာ နအာကနဖြာပပပါ Element နတ ပါဝငသေငပါတယ။

<!doctype html> <html> <head> <title>Document Title</title> </head> <body>  </body> </html>

ပထမဆးလငး <!doctype html> ဆတာက ဒ Document ဟာ HTML Document တစခပဖြစ နကကာငးနကကပငာလကတ Document Type Declaration ပ ပဖြစပါတယ။ ကျန HTML Elements အားလးက <html> Element အတငးမာ ဆကလက နရးသေားရမာပပဖြစပါတယ။ <html> Element အတငးမာ အဓက Element နစခသောရပါတယ။ <head> Element န <body> Element တ ပပဖြစပါတယ။

<head> Element ဟာ လကရ Document န သေကဆငတ အချကအလကနတနကကပငာဖြ အသေးပပရပါတယ။ သေ ထမာ ပမန အားပဖြင <title> Element တစခ ပါဝငသေငပါတယ။ <title> Element အတငးမာ Document Title အနနန အသေးပပ လတနခါငးစဉကထညသေငးနပးရမာပါ။ <head> Element အတငးမာ ထညသေငးနလရတ အပခား Element နတကနတာ <meta> <link> <script> <style> တ ပ ပဖြစပါတယ။

<body> Element အတငးမာနတာ Web Browser မာ Content အနနန နဖြာပပနစလတ အချကအလက နတ ထညသေငးနရးသေား ရမာပါ။ နမနာမာ အသေးပပထားတ  Element ကနတာ မတချကနတထညသေငးဖြ အသေးပပနငတ Comment Element ပ ပဖြစပါတယ။ Comment Element ထမာ နရးသေားထားတအချကအလကနတဟာ Document တညနဆာကသေရ မတချကများ သောပဖြစဂပး ထညသေငးနဖြာပပမာမဟတတအချကအလကများပပဖြစပါတယ။

မတချက ။ ။ HTML Element နတစစညးနရးသေားထားတ Web Document နတက File System မာ သေမးဆညး တအခါ html Extension (ဥပမာ - home.html) န သေမးဆညးရပါတယ။ Document တစခဟာ Web Document ပဖြစနကကာငး ကနပျတာက အသေနပးဖြ Extension က အဓကနတာမကျပါဘး။ Content-Type လ နခါတ File Attribute ကသော အဓကပဖြစပါတယ။ ဒါနပမယ နယဘယျ အားပဖြင html Extension န Document က သေမးဆညးနပးလကရင File Attribute နတ သေးပခား သေတမတနနစရာမလနတာပ ကနပျတာက Web Document တစခမနး အလလနားလညနစနငမာပဖြစပါတယ။ ဒါကထညသေငးနပပာရတာက Web Document တငး html Extension ရရမယလ ပနသေမယဆနစချငလ ပဖြစပါတယ။ နယဘယျအားပဖြငမနနပမယ html Extension မနပးထားတ Web Document နတလညး ရနငပါတယ။

Basic Elementsတစပခားရပနထးတ လပနဆာငချကနတက ခဏနမထားဂပး HTML Document တစခက ကျနနတာတ စာရကနတန နတ ပမင


နနကက Text Document နတန နငးယဉကကညရနအာငပါ။ Text Document နတမာ ပမနအားပဖြငနခါငးစးနတပါမယ၊ စာပဒနတ ပါမယ၊ စာရငးနတပါမယ၊ ဇယားနတပါမယ၊ နရးသေားပဖြည သေငးနငတ Form နတပါဝငမာပဖြစပါတယ။ အဒါနတအပပင ပဖြညစက ပါဝငနငတာနတကနတာ ပနတန Hyperlink နခါ အပခား Document နတကချတဆကနငတ Link နတပ ပဖြစပါတယ။ ဒါနတက HTML Document တစခမာဘယလ Element နတသေးဂပးထညသေငးရမလ ကကညကကပါမယ။

နခါငးစးဆတနနရာမာ အဆငလက နခါငးစးအမျ းမျ းရနငပါတယ။ Document တစခမာ Main Heading လ နခါတအဓက နခါငးစးရနငသေလ သေကဆငရာကဏဍတစခစမာ ထပဆငနပးထားတ Sub Heading နခါနခါငးစဉခနတရနငပါတယ။ HTML Document တစခမာ နခါငးစးန နခါငးစဉခ (၆) ဆငထညလ ရပါ တယ။ Main Heading အတက <h1> Element ကသေးရ ပါတယ။ ပထမအဆငနခါငးစဉခအတက <h2> Element ကသေးရပါတယ။ ဒတယအဆငအတက နခါငးစဉခကနတာ <h3> Element က အသေးပပရဂပး <h4> <h5> <h6> စသေပဖြင စစနပါငး (၆) ဆင ခပခားအသေးပပနငပါတယ။ ကယတညနဆာကနနတ Document သေဘာဝန ကကညနအာင သေကဆငရာနခါငးစး၊ နခါငးစဉခတ က နရးချယအသေးပပရမာပပဖြစပါတယ။

စာပဒနတထညသေငးနဖြာပပဖြ အတက <p> Element က အသေးပပရပါတယ။ စာပဒတစခစအတက <p> Element တစခစခပခား အသေးပပဖြ လအပပါတယ။ နခါငးစဉနတန စာပဒနတပါဝငတ HTML Document တစခဟာ အခလပဖြစနငပါတယ။

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>ည ပမ - စာနရးဆရာ</title> </head> <body> <h1>စာနရးဆရာကကး ဦးည ပမ</h1> <img src="nyomya.gif" alt="ဦးည ပမပ"> <p>

မရာခရင နချာငးဦးဂမ နယ အပမငဂမ နသောတာပန ရာ၌ အဖြ မငးတငပင အမတ တပအကစဘ ရ အမန နတာရ နရ နန ဦးသောဇ၊ အမ နဒါအ (နဒါနရရေအ) တ က ၁၉၁၄ ခနစ ဧဂပလ ၁ဝ ရက နသောကကာနနတင နမးဖြားသေည။ အမညရငး ဦးသေနးတင ပဖြစနသောလညး ကနလာင အမည ည ပမ သေညပင အမညရငး ကသေ တငသေည။

</p> <p>

နရရေကရာ ဆရာလင၏ မလတနး နကျာငး၊ ကကကသေနနဈေးရာ ဆရာနတာ ဦးဉာဏ နကျာငးတ တင စတင ပညာ သေငခ၏။ ၁၉၃၃ ခနစတင ရနကန တကက သေလ၌ ဆကလက ပညာ သေငသေည။ ၁၉၃၈ ခနစတင ဝဇဇာ (အဂြဂလပစာ ဂြဏထးတနး) ဘ ရခသေည။ ၁၉၄၃ ခနစတင မဟာ သေပပ (သေတငးစာ ပညာ) ဘ ရခသေည။

</p> <h2>ဘဝနဂြး</h2> <p> ၁၉၈၅ ခနစ စကတငဘာလ ၂၉ ရကနန ညနန ၆ နာရ ၃ဝ မနစတင ရနကန နဆးရကကး၌ ကယလန ခသေည။ </p> </body> </html>

နမနာက နလလာကကညမယဆရင <head> Element အတငးမာ <meta> Element တစခ ပဖြညစကပါဝင လာတာက နတ ရ ပါမယ။ ဒ Element က လကရ Document ထမာ English စာမဟတတအချကအလက နတပါဝငမယလ နကကပငာလကတာပပဖြစ ပါတယ။ အမနနတာ အခနနာကပငး Browser နတက ဒလနကကပငာမနပးလ English မဟတတအချကအလကနတပါဝငလာရင အလလသေဂပး အဆငနပပနအာငနဖြာပပနပးကကနလရပါတယ။ ဒါနပမယ ကျနနတာတ ဘကက သေတမတအသေနပးရမယအတငး ထညသေငးနပးလကတာ ပဖြစပါတယ။

<body> Element အတငးမာ အဓကနခါငးစဉအပဖြစအသေးချလတ <h1> Element တစခပါဝငဂပး နခါငးစဉခအပဖြစနဖြာပပလတ



<h2> Element တစခတ ပါဝငတာကလညးသေတပပမမာပါ။ ထညသေငးလတ စာပဒကနတာ (၃) ပဒပဖြစတအတက <p> Element သေးခ အသေးပပထားတာက နတ ရနငပါတယ။

ထးပခားချကအနနန <img> Element တစခကလညး အသေးပပထားပါတယ။ <img> Element က ပနတထညသေငးလတအခါ အသေးပပရပါတယ။ Empty Element တစခပဖြစဂပး သေ မာ Close Tag န Tag Content မပါဝငပါဘး။ ဒါနပမယ တဖြကအသေးပပ ရတ Attribute နစခ ရပါတယ။ src Attribute က ပတညရတ Path က ညနပပနပးဖြ အသေးပပရပါတယ။ alt Attribute ကနတာ ပမနဖြာပပနငတ အနပခအနနနတမာ ပအစားနဖြာပပနစလတစာ ထညသေငနပးဖြ သေးရပါတယ။ ပမနဖြာပပနငတအနပခအနနဆတာ src မာနပးထားတ Path လမားနနတာပပဖြစပဖြစ၊ အငတာနကအဆကအသေယအခကအခနကကာင မနဖြာပပနငတာပပဖြစပဖြစ အနပခအနန တစရပရပနကကာငပမနဖြာပပနငတ အနပခအနနကဆလတာပါ။

နရးသေားထားတ နမနာက nyomya.html File Name န ကးယသေမးဆညးဂပး Web Browser န ဖြငလစကကညရ မယဆရင အခလနတ ပမငရမာပပဖြစပါတယ။

<h1> Element အသေးပပထားတ အဓကနခါငးစးက စာလးခပကကးကကးန နတ ရမာပဖြစဂပးနတာ <h2> Element အသေးပပထားတ နခါငးစဉခကနတာ အနညးငယနသေးတာကနတ ရမာ ပဖြစပါတယ။ ဒါနပမယ ဒနနရာမာ ထပမသေတနပးချငတာကနတာ ကျနနတာ တ ဟာ Document Structure တညနဆာကနနပခငး ပဖြစပါတယ။ Browser က အဆငနပပနအာင နဖြာပပနပးနနနပမယ စာလးကကး ချငလ <h1> Element သေးတာမဟတပါဘး။ အဓကနခါငးစးမ <h1> သေးတာပါ။ အနညးငယပကကးချငလ <h2> သေးတာ မဟတ ပါဘး၊ နခါငးစဉခမ <h2> သေးတာပဖြစပါတယ။

လကနတ မာ Browser က အလအနလျာက နဖြာပပနပးနနတ Size က အသေးမဝငပါဘး။ ကျနနတာတ လချငတ Size န Style အတအကျရနအာင CSS န မပဖြစမနနပပငဆငယရဦးမာပါ။ ဒါနကကာင HTML နရးသေားချနမာ "ဘယလနပါမလ" ဆတာက



လးဝမစဉးစားသေငပါဘး။ ဘယလအချကအလကလ ဆတာကသောစဉးစားဂပး သေငနတာတ Element န အသေးပပနပးရမာပ ပဖြစပါတယ။

မတချက ။ ။ HTML Document က နရးသေားတအခါမာ ထညသေငးထားတ White Space နတက အလပလပတအခါထညသေငးစဉးစားမာ မဟတပါဘး။ White space ဆတာ "Space" "Tab" န "New Line" တ အတက အသေးပပထားတ နနရာလတနတက နပပာတာပဖြစပါတယ။ HTML Document က ကနပျတာက Process လပတအခါမာပ ပဖြစပဖြစ၊ Web Browser က နဖြာပပတနနရာမာပပဖြစပဖြစ White Space နတအစား Single Space န သော အစားထးဂပးအလပလပသေားမာပဖြစပါတယ။ ဒါနကကာင ကျနနတာတ Document ထမာ White Space နတက နစသေကသေလ ထညသေငးနရးသေားနငပါတယ။

မတချက ။ ။ ဒစာအပမာ နဖြာပပတ နမနာနတက စာအပနအတတထညနပးထားတ CD ထမာလညး အသေငနရးဂပး အခနးစဉ အတငးထညနပး ထားပါတယ။ နမနာနတက ကယတငကးယစမးသေပနငရငနတာ အနကာငးဆးပါပ။ လကနတ နရးပဖြစသေားနတာ ပမတမနစပါတယ။ နရးသေားတ နနရာမာနစသေကရာ Text Editor က အသေးပပနရးသေားနငပါတယ။ ဒါနပမယ Notepad လ Editor မျးန နတာ သေပအဆငမနပပပါဘး။ အနပခခ လပနဆာငချကနတပဖြစတ Line Number, Syntax Highlight, Auto Indent အစရတ လပနဆာငချကနတပါဝငတ Text Editor တစခခက အသေးပပသေငပါတယ။ CD ထမာ Sublime Text 2 လ အမညရတ Text Editor အတက Installer ထညသေငးနပးထားပါတယ။ Sublime Text 2 အနကကာငး အနသေးစတသေရလတယဆရင အခနး(၁၉) Tools and Utilities မာ နလလာနငပါတယ။ အနကကာငးအမျးမျးနကကာင ကးယ စမးသေပရာမာအဆငမနပပ ရငနတာ CD ထမာပါလာတ နမနာက ဖြငလစနလလာနငပါတယ။

Hyperlink and Anchorနရ အခနးမာ Web Server တစခမာသေမးဆညးထားတ Document န Resource တငးအတက ကယပငလပစာ URL တစခစ ရကကတယလ နဖြာပပခပါတယ။ HTML Document နတရ အဓကထးပခားချကကနတာ အဒ URL လပစာနတကအသေးပပဂပး Document တစခကနနအပခား Document နတက Hyperlink နတန ချတဆကနငပခငးပပဖြစပါတယ။

အဒအပပင Document တစခရ အတငးထက အစတအပငးတစခကနနအပခားအစတအပငးတစခကလညး ချတဆကနငပါနသေး တယ။ ပပငပ Document တစခန ချတဆကထားတ Link က Hyperlink နခါဂပး လကရ Document ထကပ အပခားအစတအပငး တစခကချတဆကထားတ Link ကနတာ Anchor လ နခါနလရပါတယ။ တနညးနပပာရမယဆရင Link နတမာ ပပငပ Resource တစခကရညညနးချတဆကနငတ External Link န လကရ Document အတငးအစတအပငးတစခကရညညနးချတဆကနငတ Internal Link ဆဂပး နစမျ းရတသေနဘာပဖြစပါတယ။

External Link ထညသေငးချငရင <a> Element က အသေးပပရဂပး Internal Link ထညသေငးချငရငလညး <a> Element ကပ အသေးပပရပါတယ။ <a> Element တငးမာ href ဆတ လပစာ URL ထညသေငးဖြ အတက Attribute တစခ မပဖြစမနန ပါဝငရ ပါတယ။ Google Search က ချတဆကထားတ External Link တစခက အခလထညသေငးနငပါတယ။

<a href="http://www.google.com/" title="Google Search">Search</a>

နပးထားတ နမနာမာ http://www.google.com/ ဆတလပစာ URL က href Attribute န <a> Element အတကထညသေငး နပးထားပါတယ။ ဒ Link ကနပလကရင http://www.google.com ဆတလပစာကသေားရမယလ ရညညနးထားပခငးလညး ပဖြစပါတယ။

title Attribute ထညသေငးနပးထားတာကလညး နမနာမာနတ ရမာပါ။ ဒ Attribute က မထညလညးရနပမယ <a> Element တငးမာ အဂမထညသေငးနပးသေငတ Attribute တစခပဖြစပါတယ။ title Attribute က လကရ Element ရ အဓပပါယအကျဉးက အသေးပပသေအတကနရာ Search Engine Spider နတလ ကနပျတာပရဂြရမနတအတကပါ ရငးပပထားတသေနဘာပဖြစဂပး <a> Element တငမကပ အပခား မညသေည HTML Element န မဆတဖြကအသေးပပလ ရပါတယ။

မတချက ။ ။ HTML Element တစခမာ title Attribute နပးထားတအခါ Web Browser မာ ကကညရ နနစဉ Mouse န Element က နထာကလကမယဆရင title Attribute မာ ထညသေငးနပးထားတ အချကအလကက Tool Tip အနနန နဖြာပပနပးမာပဖြစပါတယ။

URL မာ ရညညနးထားတ Document က သေးပခား Browser Window န နဖြာပပနစချငရငသေးတ Attribute တစခရပါတယ



target="_blank" ဆတ Attribute ပပဖြစပါတယ။ ခလနရးသေားနပးရပါတယ။

<a href="http://www.google.com/" target="_blank">Search</a>

ဒ Attribute ဟာ တစခါတစရမာ အသေးဝငနငတအတက ထညသေငးနဖြာပပနပးတာပဖြစပါတယ။ ဒါနပမယ အနကကာငးနစချက နကကာငအသေးမပပသေငပါဘး။ HTML Document တစခဟာ Data Structure ပ ပဖြစသေငတာပဖြစပါတယ။ ဘယလလပနဆာငမပစ မျ းန အလပလပသေငသေလဆတာက HTML န မသေတ မတသေငပါဘး။ target="_blank" Attribute က ဒ Link က နပလက ရင URL အညနးမာ နဖြာပပထားတ Document က နနာကထပ Browser Window တစခန ဖြငနပးလကပါလ "လပနဆာငရမယ နညးလမး" က သေတမတထားတာပဖြစနနပါတယ။ ဒကစစမျ းက JavaScript န သေးပခားနဆာငရကသေငဂပး HTML Data Structure ထမာ ထညသေငးမသေတမတသေငပါဘး။

နနာကတစချကကနတာ Usability နကကာငပဖြစပါတယ။ Web Browser တငးမာ Link က Right Click နပလကရင "Open Link in New Window" ဆတ Option ပါဝငနလရပါတယ။ အသေးပပသေကဆနဒရရင Link က သေးပခား Window တစခန နဖြာပပဖြ သေကယတငနရးချယနငမာပဖြစပါတယ။ ကျနနတာတ ထညနပးဖြ မလပါဘး။ ထညနပးလကနတာမ အသေးပပသေအတကပပဿနာပဖြစ နနတကတာပါ။ နပလကရင သေးပခား Window န ပ အဂမနဖြာပပနတာမာပါ။ လကရ Window ထမာပ နဖြာပပနစချငပါတယလ နရး စရာ Option မရနတာပါဘး။ ကျနနတာတ က အသေးပပသေက "သေးပခား Window န ကကညကကကညရမယ" လ ဇတအတငး Force လပလကသေလပဖြစသေားပါတယ။ ဒ Usability ရ နဒါငအရလညး target="_blank" Attribute က နရာငသေငတာပဖြစပါတယ။ ဒနနရာမာထညသေငးနဖြာပပတာကနတာ မပဖြစမနနလအပတတစခါတစရမာ အသေးဝငတကလ သော ထညသေငးနဖြာပပနပးထားတာ ပဖြစပါတယ။

Internal Link (Anchor) တစခ ထညသေငးဖြ အတက ကျနနတာတ ပဖြညစကနားလညရမာကနတာ Document တစခအတငးမာ ပါဝငတ HTML Element တငးက ကယပင ID သေတမတနပးထားလ ရတယဆတအချကပပဖြစပါတယ။ ဥပမာ -

<h2 id="ch2">Chapter Two</h2>

နမနာမာ <h2> Element က id Attribute အသေးပပဂပး ကယပင ID တစခ သေတမတနပးထားလကပါတယ။ လကရ Document မာ တစပခား <h2> Element နတလညး ရနငပါနသေးတယ။ ဒါနပမယ ဒ <h2> ကနတာ သေများန မတပ ကယပင ID တစခရသေားဂပ ပဖြစပါတယ။

<a> Element က အသေးပပဂပး လကရ Document ထကပ နနရာတစခက အတအကျ ညနးဆချတဆကလရင ID က ညနးဂပး ချတဆကရတာပဖြစပါတယ။ ဥပမာ -

<a href="#ch2">Chapter Two</a>

ဒ <a> Element ရ href Attribute မာ Document တစခကရညညနးထားတာမဟတပ လကရ Document ထကပ ch2 ဆတ ID ရတ Element ကရညညနးလကတာပဖြစပါတယ။ #ch2 လ နရ မာ # Sign နလး ထညသေငးနပးရတာက သေတပပပါ။

External Link နတမာလညး ပပငပ Document တစခကညနးဆယမက အဒ Document ထက Element တစခက တကရက ညနးဆလရငလညး ဒနညးအတငးပအသေးပပနငပါတယ။ ဥပမာ -

<a href="http://example.com/toc.html#ch2">Chapter Two</a>

နမနာမာ example.com/toc.html က ညနးဆယမက အဒ Document ထက #ch2 ဆတ Element ထ အတအကျ ညနးဆထညသေငးနပးလကတာပ ပဖြစပါတယ။



ListsHTML Document တစခမာ စာရငးအနနန နဖြာပပတ List နတထညသေငးဖြ အတက Element နစခ ရပါတယ။ <ul> န <ol> ပဖြစပါတယ။ <ul> ဆတာ Unordered List ဆတအဓပပါယ ပဖြစဂပး စာရငးက Bullet နလးနတန နဖြာပပနပးမာပဖြစပါတယ။ <ol> ကနတာ Ordered List ဆတအဓပပါယ ပဖြစဂပး စာရငးက နပါတစဉန နဖြာပပနပးမာပ ပဖြစပါတယ။

ဒနနရာမာလ ကယထညသေငးတ List က အစအစဉကျနဂပးသေား စာရငးဆရင <ol> က အသေးပပသေငဂပး အစအစဉကျနတစာရငး မဟတရင <ul> က သေးသေငတာပဖြစပါတယ။ အချကအလကအမျ းအစားန ကကညနအာင အသေးပပရတာပဖြစဂပး နဖြာပပပက ကကညဂပး နရးချယအသေးပပရတာ မဟတပါဘး။ Bullet န နဖြာပပတယ၊ နပါတစဉန နဖြာပပတယ ဆတ အပပငအဆငက နနာကမလ သေလနပပာငးလယလ ရပါတယ။

<ul> <ol> Element နတအတငးထမာ ပါဝငရမယ Item စာရငးကနတာ List Item Element ပဖြစတ <li> Element အသေးပပထညသေငးနပးရမာပ ပဖြစပါတယ။

နရးသေားပနမနာ

<ol> <li>Chapter One</li> <li>Chapter Two</li> <li>Chapter Three</li> <li>Chapter Four</li></ol>

ရလဒ

1. Chapter One2. Chapter Two3. Chapter Three4. Chapter Four

နရးသေားပနမနာ

<ul> <li>Yangon</li> <li>Mandalay</li> <li>Naypyidaw</li> <li>Monywa</li></ul>

ရလဒ

• Yangon• Mandalay• Naypyidaw• Monywa

<ol> Element က အသေးပပတ List တစခမာ စမတက သေတမတနပးချငရင start Attribute အသေးပပနငပါတယ။ ဥပမာ - <ol start="5"> ဆရင နပါတစဉနဖြာပပတအခါ 1 ကမစပ 5, 6, 7 စသေပဖြင နဖြာပပနပးသေားမာပဖြစပါတယ။

တစခါတစရ စာရငးကအစအစဉတကျနတာအစအစဉတကျပ၊ ဒါနပမယ အစအစဉကနပပာငးပပန (ကကးစဉငယလကနပါတစဉန ) စစဉချငတာမျ းလညးရတကပါတယ။ အဒလဆရငနတာ reversed Attribute က အသေးပပနငပါတယ။ ဥပမာ -

<ol reversed>

မတချက ။ ။ တစချ Element Attribute နတမာ နရ က Attribute Name ပပါဂပး နနာကက Attribute Value မပါတ Attribute နတရ ပါတယ။ အဒလ Attribute နတကတစပခား Attribute နတနရးသေားပန တစညတညးပဖြစနစချငရင Attribute Name ကပ Value အပဖြစ အသေးပပနရးသေားနငပါတယ၊ ဥပမာ - <ol reversed="reversed">။ XHTML နခတက ဒလအပပညအစနရးတာက အားနပးခကကနပမယ အခနနာကပငးမာနတာ နရးသေားရတတ Value မပါပ Attribute Name သေကသေကနရးသေားတ နရးနညးက အားနပးလာကကပပနပါတယ။ နစသေကသေလ နရးသေားနငပါတယ။

မတချက ။ ။ reversed Attribute ဟာ HTML5 နရာကမ ပါလာတ Attribute ပဖြစလ အသေးပပမယဆရင HTML5 Support မလပတ Browser အနဟာငးနတမာ အလပလပမာ မဟတပါဘး။



Tableဇယားနတထညသေငးဖြ အတက <table> Element က အသေးပပနငပါတယ။ ဇယားတစခဟာ Rows နတ Columns နတန ဖြ စညးထားတာမ Table တစခထညသေငးမယဆရင Rows နတ Columns နတပါ သေတမတထညသေငးနပးရမာပဖြစပါတယ။ Rows နတထညသေငးဖြ အတက Table Row <tr> Attribute သေးရမာပဖြစဂပး Rows တစခစမာ ပါဝငတ Columns နတက Table Data <td> Attribute န သေတမတ နပးရမာပဖြစပါတယ။ နရးသေားပနမနာ

<table> <tr> <td>484</td> <td>MX</td> <td>MEX</td> <td>Mexico</td> </tr> <tr> <td>504</td> <td>MA</td> <td>MAR</td> <td>Morocco</td> </tr> <tr> <td>104</td> <td>MM</td> <td>MMR</td> <td>Myanmar</td> </tr> <tr> <td>524</td> <td>NP</td> <td>NPL</td> <td>Nepal</td> </tr></table>

ရလဒ

484 MX MEX Mexico

504 MA MAR Morocco

104 MM MMR Myanmar

524 NP NPL Nepal

Table အတက နခါငးစးထညသေငးချငရငနတာ နခါငးစးအပဖြစနဖြာပပလတ Column မာ <td> Element အစား <th> Element န နပပာငးလအသေးပပနပးရမာပဖြစပါတယ။

နရးသေားပနမနာ<table> <tr> <th>Code</th> <th>ISO</th> <th>ISO3</th> <th>Name</th> </tr> <tr> <td>504</td> <td>MA</td> <td>MAR</td> <td>Morocco</td> </tr>



<tr> <td>104</td> <td>MM</td> <td>MMR</td> <td>Myanmar</td> </tr></table>

ရလဒ

Code ISO ISO3 Name

504 MA MAR Morocco

104 MM MMR Myanmar

Table က <thead> <tbody> <tfoot> Element နတသေးဂပးနတာ အပငးလကလညး ခပခား သေတမတလ ရပါတယ။

နရးသေားပနမနာ<table> <thead> <tr> <th colspan="4">Country List</th> </tr> </thead> <tbody> <tr> <th>Code</th> <th>ISO</th> <th>ISO3</th> <th>Name</th> </tr> <tr> <td>504</td> <td>MA</td> <td>MAR</td> <td>Morocco</td> </tr> <tr> <td>104</td> <td>MM</td> <td>MMR</td> <td>Myanmar</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">© Copyright 2013</td> </tr> </tfoot></table>

ရလဒ

Country List

Code ISO ISO3 Name

504 MA MAR Morocco

104 MM MMR Myanmar

© Copyright 2013



<thead> Element ထက <td> မာ colspan="4" ဆတ Attribute တစခသေးထားတာက သေတပပပါ။ အဒ Attribute က Column နတက နပါငးစပနနရာယနစလတအခါ အသေးပပပါတယ။ colspan="4" ရ အဓပပါယက ဒနနရာမာ "နလးကကစာ နနရာယပါ" လ နပပာလကသေလပါပ။ ဒါနကကာင ရလဒမာကကညလက ရငလညး Country List ဆတ Column က နလးကကစာ နနရာယဂပးနဖြာပပနပးတာကနတ ရမာပါ။

<tfoot> Element ထမာ © ဆတ နရးသေားမတစခကလညး သေတပပပါ။ အဒါကနတာ HTML Entitle Symbol လ နခါတ ထးပခားတသေနကဂတနတ ထညသေငးလတအခါ အသေးပပရတ နရးသေားနညး ပဖြစပါတယ Ampersand (&) န အစပပဂပး Semi-Colon (;) န အဆးသေတနလရပါတယ။ © ကနတာ © Symbol နလး ထညသေငးချငတအခါ နရးသေားရတ HTML Entitle Symbol ပဖြစပါတယ။

© ကသေ အလားတ Symbol နတ အများကကးရပါတယ။ ထညသေငးမတသေားသေငတ Symbol အချ က နဖြာပပနပးလက ပါတယ။

- [Space]™ - ™® - ®< - <> - >» - »« - «

အနရးအကကးဆးကနတာ Less Than Sign ( < ) ပဖြစပါတယ။ ထညသေငးနဖြာပပထားတစာထမာ Less Than Sign ထညချငရင ဒတငးရကထညလကလ မရပါဘး။ Browser က < Sign က Tag အဖြငလ ယဆနနမာပါ။ < လ ထညနပးမ < နနရာမာ < Less Than Sign က Browser က အစားထးနဖြာပပနပးမာပဖြစပါတယ။

Table Layoutဒအခနးမာ ခဏခဏနပပာနနတကစစကပထပနပပာရပါဦးမယ။ HTML Document တစခဆတာ Semantic Data Structure အနနန စနစတစကျတညနဆာကထားတ အချကအလကများသောပဖြစသေငဂပး အဒ Document က ဘယပဘယနညးနဖြာပပရမလ ဆတာကနတာ သေးပခား Style Language ပဖြစတ CSS န သေတမတရတာပဖြစပါတယ။ ဒါနပမယ ပပဿနာက XHTML မတငခငမာ Browser နတရ CSS Support က အနတာနလးအားနညးခပါတယ။

၁၉၉၆ ခနစမာ အဂပးသေတခတ CSS2.1 က အဒကာလနတမာ လသေးအများဆးပဖြစတ Internet Explorer က ၂၀၀၁ ခနစနရာက မသော တစဝကနကျာနကျာ Support စလပနငပါတယ။ ဒါနတာင တစဝကနကျာနကျာပရပါနသေးတယ။ ၂၀၀၁ မတငခငက Web Developer နတဟာ Document နတက Style လပနငဖြ CSS က အားကးလ မရခပါဘး။ ဒါနကကာင မရရနအာငကကဖြနလပတ အနနန <table> Element နတက Document Layout အတကအသေးပပခကကပါတယ။



နဖြာပပထားတ Layout က Table တစခလ ပမငကကညပါ။ Row သေးခရပါတယ။ အလယ Row မာ Column နစခရဂပး ကျန Row နစခမာ Column တစခစ ရကကပါတယ။ ဒနညးန <table> Element နတက စာရငးဇယားနဖြာပပဖြ မဟတပ Document Layout အတကသေးခကကပါတယ။ တစပဖြညးပဖြညး Web Developer နတကကား အနလအကျငတစခလပဖြစလာတအတက XHTML နပါလာဂပး Semantic Web က အားနပးလာချန၊ Browser CSS Support နတ အထကအနလျာကအားနကာငးလာချနမာ <table> Element က ဇယားနဖြာပပဖြ ပသေးဖြ ၊ Layout အတကမသေးဖြ အနတာနလးပပနဂပးတကတနးခရပါတယ။

ကနနနခတမာနတာ Browser CSS Support ဆတာ အနတာနလး ပပညစအားနကာငးနနဂပပဖြစပါတယ။ Layout အတကနတာ Table နတသေးနနစရာမလနတာပါဘး။ လကနတ မာ Table Layout တစခဟာ CSS Layout နလာက ပပညစသေပရပပခငးလညး မရပါဘး။ ဒါနကကာင အရငက <table> Element က Layout အတကသေးတနခတရခတယဆတာနလာကပနပပာချငပါတယ။ ကျနနတာတ လကလပကကဖြ မဟတပါဘး။

Formatting ElementsText နတက Format လပလတအခါအသေးပပနငတ Element နတရပါတယ။ အနပခခအားပဖြင <b> Element ကစာလးနတ Bold လပဖြ အသေးပပဂပး <i> Element က စာလးနစာငး (Italic) ပပလပဖြ အသေးပပနငပါတယ။ ဒါနပမယ Format လပတယဆတာ အမနနတာ စာနတကဘယလပစ နဖြာပပရမလသေတမတပခငးပဖြစပါတယ။ HTML Document ထမာ Format လပတ Element နတ (ပဖြစနငမယဆရင) ထညသေငးအသေးမပပသေငပါဘး။ စာနတကဘယလပစနဖြာပပရလဆတ Style Detail က CSS န သေတမတ နငပါတယ။

ဒါနကကာငလညး W3C က XHTML မာ <b> <i> <s> <u> အစရတ Formatting Elements နတက ဖြယထပပပစခတာပဖြစ ပါတယ။ ဒါနပမယလညး Document နတမာ တစပခားစာနတန မတပ အနလးနပးနဖြာပပသေငတစာနတ ပါဝငတကပါတယ။ အဒလ အထးအနလးနပးနဖြာပပသေငတ စာနတအတက အသေးပပနငဖြ Semantic Element ပဖြစတ <strong> <em> <del> တ က နတာ XHTML မာထညသေငးနပး ခပါတယ။

<i>Hello, World!</i> လ နရးသေားရင Hello, World! လ စာလးနစာငးန နဖြာပပထားတ ရလဒကရမာပါ။ <em>Hello, World!</em> လ နရးသေားရငလညး စာလးနစာငးန ပနဖြာပပတ တညတရလဒကပရရမာပဖြစပါတယ။ ဒါဆရင <i> Element အစား <em> Element သေးလကလ ဘာများထးသေားလ လညး? လ နမးစရာရလာနငပါတယ။ ကျနနတာတ ကယကယက ပပနနမး သေငတာက "ဘာလ စာလးနစာငးသေးတာလ?" ဆတနမးခနးပဖြစပါတယ။ စာလးနစာငးလပလကတယဆတာ အများအားပဖြင အဒစာက ပဂပးထးပခားနစချငလ ပဖြစပါတယ။ <em> ဆတာ Emphasis (အထးပပနဖြာပပချက) ဆတအဓပပါယပဖြစပါတယ။ ပဂပး အဓပပါယရပါတယ။ ဒါနကကာင စာလးနစာငးနဖြာပပလကပါလ အဓပပါယရတ <i> Element အစား အထးပပနဖြာပပလကပါလ အဓပပါယရတ <em> Element ကသေးတာကပဂပး Semantic ပဖြစနစမာပဖြစပါတယ။

ဒါနပမယလညး HTML5 မာနတာ <u> Element ကလရင အားလးက ခငပပထားတအတက အသေးများတ Formatting Elements နတက နဖြာပပနပးလကပါတယ။

<b> - စာလးနတ Bold လပနဖြာပပဖြ အသေးပပနငပါတယ (Example)။<i> - စာလးနတက စာလးနစာငးန နဖြာပပဖြ အသေးပပနငပါတယ (Example)။ <s> - စာလးနတက Strike-through လပဂပးနဖြာပပဖြ အသေးပပနငပါတယ (Example)။<strong> - ပဂပးထငရားနပါလငနစလတ စာနတအတကသေးနငပါတယ (Example)။<em> - အထးပပနဖြာပပလတ စာနတအတကသေးနငပါတယ (Example)။<del> - ဖြျကထားနကကာငး အသေနပးနဖြာပပလတ စာနတအတကသေးနငပါတယ (Example)။ <sup> - Superscript နတနဖြာပပဖြ သေးနငပါတယ (Example – 2nd)။<sub> - Subscript နတနဖြာပပဖြ သေးနငပါတယ (Example – H2O)။<code> - Program Code နတ ထညသေငးနဖြာပပဖြ သေးနငပါတယ (Example)။<pre> - ကကတင Format လပထားတ စာနတနဖြာပပဖြ သေးနငပါတယ။ ပမနဆရင HTML က Whitespace နတက နဖြာပပနလ



မရနပမယ <pre> Element ထမာ ထညသေငးထားတ Whitespace နတကနတာ နရးသေားထားတအတငး နဖြာပပနပးမာ ပဖြစပါ တယ။ HTML Document ထမာ တစနကကာငးထကပတ Program Code နတ ထညသေငးနဖြာပပဖြ အသေးဝငတ Element ပဖြစပါတယ။

Form and Inputsစာရကစာတမးနတမာနရးပဖြညစရာ Form နတပါဝငတကသေလပ HTML Document နတမာလညး Form နတထညသေငးလ ရ ပါတယ။ အသေးပပသေနတက အချကအလကပဖြညသေငးရတ Element မ Input Element နတလ နခါပါတယ။ အနပခခအကျဆး ကနတာ Text Input ပဖြစပါတယ။

<input> Element အသေးပပရဂပး type Attribute မာ "text" လ သေတမတနပးရပါတယ။ Empty Tag တစခပဖြစတအတက Close Tag န Content မရပါဘး။

<input type="text">

တစပခားအသေးဝငတ Attribute နတ ရပါနသေးတယ။ value Attribute က Text Input မာ Default Value နဖြာပပဖြ သေးနငပါ တယ။ Text Input ထက အချကအလကနတက အသေးပပသေကမပပငဆငနစချငရင readonly Attribute န ကန သေတနင ပါတယ။ disabled Attribute န Input က Mute လပနငပါတယ။ maxlength Attribute န Text Input ထမာထညသေငး ခငပပလတ စာလးအနရအတက ကကန သေတနငပါတယ။ ဥပမာ -

<input type="text" maxlength="6">

Input န အတ Label နတက တဖြကနဖြာပပနစချငရငနတာ <label> Element က သေးနငပါတယ။

<label for="fname">First Name</label><input type="text" id="fname">

<label> Element န <input> Element တ က ချတဆကဖြ အတက <label> Element ရ for Attribute မာ <input> Element ရ id က ထညသေငးနပးပခငးပဖြင ချတဆကလကတာပပဖြစပါတယ။ ရရမယအကျ းကနတာ အသေးပပသေက "First Name" ဆတ Label ကနပလကရင Text Input မာအလလ Focus ပဖြစနနနစမာပပဖြစပါတယ။

Input Element န ပထညသေငးနငတ အပခား Input အမျ းအစားနတ ရပါနသေးတယ။

<input type="password"> က အသေးပပသေ Password ရကထညနစဖြ သေးနငပါတယ။ Text Input န အနပခခအားပဖြင တနပမယ အသေးပပသေအချကအလကနတရကထညတအခါ Star နလးနတအပဖြစ နပပာငးလနဖြာပပနပးမယ Input အမျ းအစား ပဖြစပါတယ။

<input type="hidden"> ဟာလညး Text Input န အနပခခအားပဖြငတပါတယ။ ဒါနပမယ hidden ဆတအတငး အသေးပပသေက ထညသေငးနဖြာပပမာမဟတတ Input အမျ းအစားပဖြစပါတယ။ Application နတတညနဆာကတအခါ ဒ hidden Input က သေ နနရာန သေအသေးဝငပါတယ။

<input type="checkbox"> ကနတာ Checkbox Option နတထညသေငးဖြ အသေးပပနငပါတယ။ checked Attribute ကအသေးပပဂပး Default Check လပနပးနငပါတယ။ checked Attribute ဟာ အပပညအစဆရင checked="checked" လ နရးနပးရတ Attribute တစခပဖြစပါတယ။ နရ မာနပပာခ သေလပအပပညအစပပဖြစပဖြစ၊ Attribute Name သေကသေကချညးပဖြစပဖြစ နစသေကသေလနရးနငပါတယ။

<input type="radio"> ကနတာ Radio Option နတထညသေငးဖြ အသေးပပနငပါတယ။ သေလညးပ checked Attribute



ကပ Default Check သေတမတနငပါတယ။ ထးပခားချကကနတာ၊ Radio Option ဆတာ နရးစရာအများကကးထက တစခတညး ကပ နရးခငနပးတ Option အမျ းအစားပါ။ ဒလပနဆာငချကရဖြ အတက အမျ းအစားတရာ Radio Option နတက name Attribute စစညးနပးရပါတယ။ ဥပမာ -

<input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female">

<input type="submit"> ကနတာ Button ထညသေငးဖြ အသေးပပရပါတယ။ submit Button ဟာ Form တစခအတက အနရးအကကးဆးပဖြစပါတယ။ submit Button အလပလပပက အခနး (၈) PHP Basic မာ အနသေးစတထပရငးနပးမာပဖြစ ပါတယ။

မတချက ။ ။ value Attribute ဟာ Text Input နတအတက Default Value နဖြာပပဖြ အသေးပပပါတယ။ Checkbox န Radio Option တ အတကနတာ သေကဆငရာ Element ရ တနးဖြးသေတမတနပးဖြ သေးရပါတယ။ Button Element နတအတကနတာ value Attribute က Button နပါမာနပါတ Button Label နဖြာပပဖြ အသေးပပနငပါတယ။ ဥပမာ - <input type="submit" value="Save">

<input type="reset"> ဟာလညး Button တစခပပဖြစပါတယ။ reset Button က နပလကရင Input အားလးမာ ထညသေငးထားတအချကအလကနတက ရငးလငးနပးမာပဖြစပါတယ။ ဒ Button ဟာ မသေးသေငတ Button တစခပဖြစပါတယ။ Web Form တစခမာပဖြညသေငးစရာ Input (၁၀) ခခန ပါတယဆကကပါစ ။ အားလးပဖြညဂပးမ ပဖြညခသေမျမားနနလ (၁၀) ခလးက ပပနရငး ပပစချငတယဆတအသေးမျ းက လကနတ မာမရပါဘး။ မားလ ပပနပဖြညချငလ တစခနစခပရမာပါ။ ဒ Button ထညထားမမ အသေးပပ သေက မနတာတစဆမားနပမရင သေပဖြညခသေမျအကနရငးသေားလ အစအဆးပပနထညရတပပဿနာရနငပါတယ။ Usability ဆတ အသေးပပရအဆငနပပလယကမ ရ နဒါငကကကညမယဆရင အထးလအပချကတစစတစရာမရရင မသေးသေငတ Button တစမျ းပပဖြစ ပါတယ။

<input type="button"> ဟာလညး Button တစမျ းပ ပဖြစပါတယ။ သေကနတာ Button အလတတစခသောပဖြစပါတယ။ ဘာအလပမလပမာမဟတပါဘး။ JavaScript န တဖြကအသေးပပလတအခါမသော အသေးပပရမယ Button တစမျ းပဖြစပါတယ။

<button> Element ဟာ လညး <input type="button"> န အတတပပဖြစပါတယ။ ထးပခားချကက <button> Element က Full Element တစခပဖြစတအတက Element Content န Close Tag ရပါတယ။ ဥပမာ - <button>Download</button> လ နရးရမာပဖြစပါတယ။ ရလဒကနတာ <input type="button" value="Download"> လ နရးသေားပခငးန အတတပရမာပဖြစပါတယ။

<button> Element ရ ထးပခားချကက လအပရင Formatting Tag နတက Content မာ ထညနရးလ ရနငပခငးပ ပဖြစပါတယ။ ဥပမာ - <button>Download <b>file.pdf</b></button> လ နရးသေားနငတအားသောချကရမာပဖြစပါတယ။

နနာက Input Element နစမျ း ကျနပါနသေးတယ။ Textarea န Select Box တ ပ ပဖြစပါတယ။ သေတအတကနတာ <input> Element မသေးပါဘး။ Textarea ထညသေငးဖြ အတက <textarea> Element ကသေးရပါတယ။ ထးပခားချကက <textarea> ဟာ <input> လ Empty Element မဟတပါဘး။ အဖြငအပတရတ Full Element ပဖြစပါတယ။ ဂပးနတာ Default Value သေတမတဖြ အတက <input type="text"> မာလ value Attribute သေးဂပးသေတမတလ မရပါဘး။ Default Value က အဖြင Tag န အပတ Tag ကကားထမာနရးနပးရပါတယ။ ဥပမာ - <textarea>Default Text</textarea>

Select Box က Drop-Down Box လ လညး နခါပါတယ။ ထညသေငးဖြ အတကနတာ <select> Element က သေးရပါတယ။ နပလကရင နရးစရာစာရငးကျလာမာပဖြစပါတယ။ နရးစရာစာရငးကနတာ <option> Element နတန သေတမတနပးနင ပါတယ။ ဥပမာ -



<select> <option value="1">Apple</option> <option value="2">Orange</option> <option value="3" selected>Mango</option> <option value="4">Grape</option></select>

<option> Element နတမာ value Attribute သေတမတထားတာက သေတပပပါ။ ဥပမာ - Orange လ နရးစရာစာရငးမာ နဖြာပပထားနပမယ သေ ရ တနဖြးအမနက (2) ပဖြစပါတယ။ value Attribute မနပးထားလညး ရပါတယ။ မနပးထားရငနတာ နရးစရာစာရငးမာနဖြာပပထားတ Orange ကပ သေရ value အနနန အသေးပပသေားမာပါ။ နနာကထပသေတပပရမာက selected Attribute ပဖြစပါတယ။ သေက Default နရးထားနပးနစလတ <option> Element မာ ထညသေငးနပးရမာပဖြစပါတယ။ selected Attribute နပးထားတ <option> မရရင၊ အနပါဆး <option> က Default အနနန နရးထားနပးမာပ ပဖြစပါတယ။

HTML Form နမနာ

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML Form</title> </head> <body> <h1>Form Inputs</h1> <form> <label for="fname">Name</label><br> <input type="text" id="name"><br>

<label for="email">Email</label><br> <input type="text" id="email"><br>

<label for="address">Address:</label><br> <textarea id="address"></textarea><br>

<br> <input type="radio" name="gender" id="male"> <label for="male">Male</label> <input type="radio" name="gender" id="female"> <label for="female">Female</label><br> <br>

<label for="education">Highest Education</label><br> <select id="education"> <option>High School</option> <option>Bachelor</option> <option>Post Graduate Diploma</option> <option>Master</option> <option>Ph.D</option> </select><br> <br>

<input type="submit" value="send"> </form> </body> </html>

နမနာမာနဖြာပပထားတ Form က form.html File Name န ကးယသေမးဆညးဂပး Browser န ဖြငကကညရင အခလရလဒ ရရမာပပဖြစပါတယ။



မတချက ။ ။ Browser မာ နဖြာပပတအခါ Element နတက နနာကတစ လငးဆငးဂပး နဖြာပပနစချငရင <br> Element က အသေးပပနငပါတယ။ <br> ဆတာ Line Break ဆတ အဓပပါယပဖြစဂပး Content န Close Tag မရတ Empty Element တစခလညး ပဖြစပါတယ။

Conclusionအခနဖြာပပခတ Element နတဟာ ရးရး Text Document တစခက HTML Element နတန တညနဆာကတအခါအသေးပပရတ အနပခခ Element များပ ပဖြစပါတယ။ ပဖြညစကမတသေားဖြ လတ Element န Attribute နတက သေကဆငရာအခနးအလက ဆကလကနဖြာပပနပးသေားမာပဖြစပါတယ။ ဒအခနးမာနတာ၊ HTML Document နတဟာ Web Application နတရ အနပခခ Semantic Data Structure နတ ပဖြစတယဆတအချကက အထးပပမတသေားနစချငပါတယ။



အခနး (၃) Cascading Style Sheets – CSSThe World without CSS is Ugly

HTML Document နတက Web Application နတရ အနပခခအတပမစလ ယဆမယဆရင CSS ဆတာ Decoration လပနပးတ ပလာစတာန သေတနဆးပဖြစလ ဆနငပါတယ။ CSS ကစတငဖြနတးခတ ရညရယချကကလညး Document Content န Style က ခပခားထားချငလ ပဖြစပါတယ။ HTML က Content Structure တညနဆာကဖြ အသေးပပဂပး အဒ Content နတကဘယလပစဘယလ Style န နဖြာပပရမလ ဆတာက CSS န သေတမတရတသေနဘာပဖြစပါတယ။

CSS Style Language ကတထငဖြနတးဖြ နဆးနနးကကနတာ အဆပပချက Proposal (၉) မျ းထ ရရခကကပါတယ။ အဒထက (၂) မျ းကအနပခခဂပး တထငဖြ W3C ကဆးပဖြတခပါတယ။ Cascading HTML Style Sheets (CHSS) န Stream-based Style Sheet Proposal (SSP) တ ပ ပဖြစပါတယ။ CHSS ကနတာ ကနနတငတငကျယကျယအသေးပပနနကကတ CSS န ပဂပးနးစပပါ တယ။ အမနနတာ CSS က HTML တငမကပါဘး၊ တစပခား Markup Language နတန လညးတဖြက အသေးပပနငပါတယ။ ဥပမာ - XML, SVG, XUL။ ဒါနကကာင CHSS ကနန H က ဖြယလကဂပး CSS လ အမညတငနစခတာပဖြစပါတယ။

တစပခား Style Language နတန မတပ CSS ရ တစမထးပခားချကကနတာ Document တစခအတက တစခထကပတ Style Sheets နတတဖြကအသေးပပနငဂပး၊ Style Sheet တစခကအပခား Style Sheet တစခထမာသေတမတထားချကနတက Cascade (Inherit) လပယဂပး ဆကလကအသေးပပနငပခငးပ ပဖြစပါတယ။ ဒါနကကာငလညးသေ က Cascading Style Sheet လ နခါတာပဖြစ ပါတယ။

၁၉၉၆ ခနစ ဒဇငဘာလမာ CSS ရ ပထမဆး Version နကကပငာခပါတယ။ အမနနတာ CSS မာ Version လ မသေးပါဘး။ CSS Level 1 လ နခါကကပါတယ။ အခနနာကဆး HTML5 န တဖြကပါဝငလာတ CSS3 ကနတာ CSS Level 3 လ နခါပါတယ။ လကရတငတငကျယကျယ အသေးပပနနကကတာကနတာ ၂၀၀၄ ခနစ နဖြနဖြာဝါရမာ နကကပငာခတ CSS2.1 (Level 2 Revision 1) ပဖြစပါတယ။

CSS SyntaxCSS ဟာ Programming Language တစခမဟတသေလ Markup Language တစခလညးမဟတပါဘး။ နကကပငာချကနတစစညး ထားတ Language တစမျ းပဖြစပါတယ။

"<h2> Element နတကစာလးအနနရာငန နဖြာပပပါ။ Bold လပဂပးနဖြာပပပါ။"

"<p> Element များထက class Attribute မာ 'note' လ သေတမတထားတ Element နတက စာလး Size 12 Pixels အသေးပပနဖြာပပပါ။" စသေပဖြင ဘယ Element က ဘယလ Style န နဖြာပပရမလဆတာက သေတမတနကကပငာထားတ နကကပငာချက များပ ပဖြစပါတယ။ နရးသေားပ Syntax က ပ (၃-က) မာ ကကညပါ။

ပ (၃-က) CSS နရးသေားပ နရးထး



Selector, Property, Values ဒသေးမျ းပ ပါတာပါ။ Selector ဆတာ h1, p, img, li စတ HTML Element နတကနရး ချယပခငးပဖြစပါတယ။ Property နတကနတာ color, background, border, font-style စတ Style Property နတပဖြစပါတယ။ Values နတကနတာ blue, 20px, bold, center စတ Style Value နတပပဖြစပါတယ။ ဥပမာ - <p> Element နတအားလးကစာလးအစမးနရာင န နဖြာပပပါလ CSS န အခလနကကပငာနပးနငပါတယ။

p { color: green;}

နမနာမာ p က Selector ပဖြစပါတယ။ color က Property ပဖြစဂပး green ကနတာ Value ပဖြစပါတယ။

CSS SelectorsCSS မာ နပါတ (၁) အနရးအကကးဆးက Selector ပဖြစပါတယ။ Element နပါငးများစာန ဖြ စညးထားတ HTML Document တစခထက ကယ Style သေတမတလတ Element က Select လပနရးချယနငပခငးဟာ ပထမဆးလအပချကပဖြစပါတယ။

Selector နတထမာ အနပခခအကျဆးကနတာ Element Selector, ID Selector န Class Selector တ ပပဖြစပါတယ။ Element Selector ကနတာ HTML Element Name န Select လပပခငးပဖြစပါတယ။ မညသေည HTML Element ကမဆ Name အတငး CSS န Select လပယနငပါတယ။ နမနာတစချ နဖြာပပနပးပါမယ။

body { background: black; color: white;}

h1 { font-size: 24px; margin-bottom: 20px;}

ul { list-style: square; line-height: 20px;}

a { color: yellow; text-decoration: none;}

body, h1, ul, a စသေပဖြင Element Name အတငး Select လပယပခငးပဖြစတအတက သေတ က Element Selector နခါတာပါ။ ID Selector ကနတာ id Attribute သေတမတနပးထားတ Element နတက id န ပ Select လပပခငး ပဖြစပါတယ။ ဥပမာ - ကျနနတာတရ HTML Document ထမာ ဒလ Element Structure ပါဝငတယဆကကပါစ ။

<ul id="nav"> <li id="key-nav"> … </li> <li> … </li> <li> … </li> …</ul><p id="highlight"> … </p><ul id="sitemap"> …</ul><p id="foot-note"> … </p>

ul { background: pink; } လ နရးသေားမယဆရင ဒ Structure မာ ပါဝငတ <ul> Element နစခစလးရ Background



က ပနးနရာငပဖြစသေားမာပါ။ ကျနနတာတ က အနပါက <ul> Element တစခထအတက Style သေတမတချငတာဆရငနတာ သေမာနပးထားတ ID ကပါ ထညသေငး Select လပနပးဖြ လမာပဖြစပါတယ။ ဥပမာ -

ul#nav { background: pink;}

(သေ မဟတ)

#nav { background: pink;}

# Sign နလးက ID Selector လ နခါတာပဖြစပါတယ။ ul#nav ရ အဓပပါယက "ID က nav လ နပးထားတ <ul> Element က Select လပပါ" ဆတ အဓပပါယပဖြစပါတယ။ #nav ရ အဓပပါယကနတာ "ID nav လ နပးထားတ Element က Select လပပါ" ဆတအဓပပါယ ပဖြစပါတယ။ ဒါနကကာင ဘယလနရးနရး ကျနနတာတ လချငတရလဒပဖြစတ ID မာ nav လ နပးထားတ <ul> Element က Background ပနးနရာငသေတမတပခငးရလဒ ရရမာပပဖြစပါတယ။ ကာပခားချက အနညးငယရနပမယ လကနတ နရး သေားတအခါမာ နရးသေားသေရ နရးချယမသောအဓကပဖြစလ နစသေကရာနညးလမးန နရးသေားနငပါတယ။

နပးထားတ Structure နမနာမာ <p> Element လညး နစခပါလ အဒထက id="highlight" လ နပး ထားတ Element ကပ နရးယချငရင p#highlight (သေ မဟတ) #highlight ဆတ ID Selector နညးလမးန နရးယနငမာပပဖြစပါတယ။

Class Selector ကနတာ နရးသေားပအားပဖြင ID Selector န ခပဆငဆငပပဖြစပါတယ။ Element နတမာ class Attribute နပးထားဖြ လပါတယ။ # Sign က ID Selector အပဖြစအသေးပပရသေလပ Dot ( . ) က Class Selector အပဖြစ အသေးပပရပါတယ။ ကျနနတာတ မာ ဒလ Element Structure ရတယဆကကပါစ ။

<p> … </p><p class="note"> … </p><p> … </p><p class="note"> … </p>

<p> Element နလးခပါဝငပါတယ။ ဒါနပမယ အဒထက class="note" လ နပးထားတ နစခကပ နရးချယ Select လပချငရငနတာ ခလနရးသေားနပးရမာ ပဖြစပါတယ။

p.note { color: gray; font-size: 11px;}

(သေ မဟတ)

.note { color: gray; font-size: 11px;}

ID Selector မာလပ p.note ရ အဓပပါယက "Class မာ note လ နပးထားတ <p> Element က Select လပပါ" ဆတ အဓပပါယပဖြစဂပး .note ရ အဓပပါယကနတာ "Class မာ note လ နပးထားတ Element က Select လပပါ" ဆတအဓပပါယ ပပဖြစပါတယ။ နစသေကရာနညးလမးန နရးသေားနငပါတယ။ တစချ က အဓပပါယပမနပါလငတ p.note နရးဟနက အားနပး ကကနပမယတစချ ကလညး စာလးတစလးနစလးသေကသောလညးမနညးဘးဆတသေနဘာန .note နရးဟနကအားနပးကကပါတယ။



မတချက ။ ။ HTML Document တစခမာ ID တတ Elements နစခမရသေငပါဘး။ CSS ကနတာ ID တတ Element နစခရနနလညး နစခလးအတက အလပလပသေားမာပါပ။ ဒါနပမယ သေဘာဝအရ ID ဆတာ Element နတက Identify လပတာပါ။ Unique ပဖြစရပါတယ။ CSS မာ ပပဿနာမရနပမယ နနာကပငး JavaScript န Element နတက စမတအခါ ID တတ Element နတ ရနနရင မလလားအပတအခကအခနတ နတ ရမာပဖြစပါတယ။ Class ကနတာ Element နတက Classify လပတာပါ။ သေဘာဝအရကကအမျးတရာစဖြ သေးရတာပဖြစလ နဖြာပပပအမျး အစားတတ Element နတက Class အတတ နပးတာလပသေငတအလပတစခပပဖြစပါတယ။ Front-End Expert နတကနတာ CSS အတက Element နတက ID မနပးပ Class နပးတာကပသေငနတာတယလ အကကပပကကနလရပါတယ။

Slightly Advanced CSS Selectorsအနညးငယထးပခားဂပး များစာအသေးဝငတ Selector တစချ က ထပမနဖြာပပပါမယ။ အဒါနတကနတာ Descendant Selector, Child Selector, Attribute Selector တ ပ ပဖြစပါတယ။

Descendant Selector ဆတာ Element တစခအတငးမာ ထပဆငရနနတ Element နတက Select လပဖြ သေးပါတယ။ Nested Selector လ လညးနခါပါတယ။ Document တစခမာရသေမျ Element တငးက Class နတ ID နတ လကနပးနနစရာမလပ နရးချယ Select လပနငတ နညးလမးပဖြစလ အလနအသေးဝငပါတယ။ HTML Element Structure နလးတစခန တကကညချင ပါတယ။

<a href="#">Outside Link</a><p> <a href="#">Inside Link One</a> <strong><a href="#">Inside Link Two</a></strong></p>

ဒနမနာမာ <a> Element သေးခပါဝငပါတယ။ တစခက သေးပခားရနနတာပါ။ နစခကနတာ <p> Element ထမာ ရနနတာပါ။ <p> Element အတငးထက <a> တစခက <strong> Element တစခအတငးထကထပနရာကနနပါနသေးတယ။ အဒ <a> Element နတက ဒနညးန Select လပယနငပါတယ။

p a { color: gray;}

p [space] a လ နရးသေားထားတာပါ။ အဒ [space] က Descendant Selector အနနန သေးလကတာပဖြစပါတယ။ အဓပပါယ က "<p> Element အတငးထက <a> Element နတက Select လပလကပါ" လ အဓပပါယရပါတယ။ ဒါနကကာင <p> Element အတငးထက <a> Element နစခလးက နရးချယလကတသေနဘာလညးပဖြစပါတယ။ ဒါနပမယ အပပငဘကမာ သေးပခားရနနတ <a> ကနတာ ထညသေငး Select လပမာမဟတပါဘး။

မတချက ။ ။ နမနာ Element Structure မာ <a> Element နတအတက href Attribute မာ URL အစစအမနမနပးထားပ # Sign နလးက နပးထားပါတယ။ အဒါ ဘာအဓပပါယမမဟတပါဘး။ နမနာ သေကသေကနဖြာပပချငတာပဖြစလ URL အစစအမနမထညနတာပခပလယလယ # Sign နလးတစခတညး ထညထားလကတာပဖြစပါတယ။ # Sign နလးဟာ URL မာ ထညသေငးအသေးပပနငတ Valid Sign ပဖြစလ တစပခား သေနကဂတ နတအစား # Sign က နမနာအနနန အသေးပပတာပါ။

p strong a { color: gray;}

p [space] strong [space] a လ သေးထားပါတယ။ အဓပပါယက "<p> Element အတငးထက၊ <strong> Element အတငးမာ ရနနတ <a> က Select လပပါ" ဆတ အဓပပါယပဖြစလ နပးထားတ Structure ထက Inside Link Two တစခ တညးကပနရးချယသေားမာပဖြစပါတယ။ ဒနညးန Element တစခအတငးမာ ထပဆငရနနတ Element နတက Select လပသေားနင ပါတယ။ လကနတ Project နတမာ နရးသေားအသေးပပနလရတနမနာတစချ ထပမနဖြာပပလကပါတယ။



#header a { text-decoration: none; color: black;}

#nav li a.active { background: black; color: white;}

.note strong { font-weight: normal; color: red;}

#footer p { font-size: 11px; color: gray;}

a img { border: 0 none;}

Child Selector ကနတာ Descendant န သေနဘာတရားဆငပါတယ။ Element တစခအတငးမာ ထပဆငရနနတ Element ကပ Select လပတာပါ။ ကာပခားချကကနတာ Descendant Selector က Element တစခအတငးမာရသေမျ ကကညတ Element နတ အားလးက Selector လပသေားမာပါ။ Child Selector ကနတာ Direct Child ပဖြစတ Element နတကသော နရးချယနပးမာပါ။ ထပဆင Element နတန ရနနတ အပခား Element နတက ထညသေငး Select လပနပးမာမဟတပါဘး။ Descendant Selector နလလာဖြ သေးခတ Element Structure ကပ ပပနလညအသေးပပချငပါတယ။

<a href="#">Outside Link</a><p> <a href="#">Inside Link One</a> <strong><a href="#">Inside Link Two</a></strong></p>

<p> Element အတငးထက <a> Element က ဒနညးန လညး Select လပယနငပါတယ။

p > a { color: gray;}

Arrow သေနကဂတနလးက ( > ) Child Selector ပပဖြစပါတယ။ အဓပပါယက "<p> Element အတငးထက Direct Child ပဖြစတ <a> Element က Select လပလကပါ" ဆတအဓပပါယပဖြစပါတယ။ ဒ Selector က Inside Link One ဆတ <a> Element တစခတညးကသော နရးချယနပးသေားမာပါ။ Inside Link Two ဆတ <a> Element ကနတာ Direct Child မဟတပ <strong> Element အတငးထမာထပဆငရနနတာပဖြစလ ထညသေငးနရးချယသေားမာမဟတပါဘး။ ဒါက Child Selector န Descendant Selector တရ ကာပခားချကပပဖြစပါတယ။

နနာကတစခကနတာ Attribute Selector ပဖြစပါတယ။ Element မာနပးထားတ Attribute န Select လပတာပဖြစဂပး သေလညးပ အနတာအသေးဝငတ Selector ပဖြစပါတယ။ နလးနဒါငကငးအတငးမာ နရးနပးရပါတယ။ ဥပမာ - [title] ဆတာ title Attribute ရတ Element အားလးက Select လပလကပခငးပဖြစပါတယ။ img[alt] ဆရငနတာ <img> Element နတထကမ alt Attribute ရတ Element နတက Select လပလကတာ ပဖြစပါတယ။ img[alt="Feature Image"] ဆရငနတာ <img> Element နတထကမ alt="Feature Image" လ သေတမတထားတ Element နတက Select လပတာ ပဖြစပါတယ။ အထးသေပဖြင <input> Element ဟာ သေ တစခတညးန text, radio, button စသေပဖြင Type အမျ းမျ း သေတမတနငတ အတက အဒ type Attribute က အနပခခဂပး Select လပနပးဖြ လအပတကပါတယ။ နမနာတစချ နဖြာပပလကပါတယ။



input[type=text] { background: yellow; border: 1px solid gray;}

input[type=submit] { padding: 5px 15px;}

input[type=radio] { margin-right: 5px;}

အခနဖြာပပခတ Descendant Selector, Child Selector န Attribute Selector တ က ထနရာကနအာငအသေးချနငမယဆရင Element နတက Select လပရတာ များစာ ထနရာကလယကသေားမာပပဖြစပါတယ။

PseudoclassesPseudo-class နတဟာ CSS Selector ရ အစတအပငးတစရပပဖြစပါတယ။ Element ရ "အနပခအနန" နပါမတညဂပး Select လပတနညးလမးနတပဖြစပါတယ။ အနပခအနနဆတာက၊ အသေးပပသေက Element က Mouse န နထာကလကတအခါ၊ အသေးပပ သေက Element က Click လပလကတအခါ၊ Element က Focus ပဖြစသေားတအခါ၊ Element က နနာကဆး Element ပဖြစနနတ အခါ စသေပဖြင Element နတရ ဘယလအနပခအနနမာ ဘယလ Style နဖြာပပလကပါလ သေတမတနငဖြ Select လပယတ Selector နတပ ပဖြစပါတယ။

:hover Pseudo-class က Element က Mouse န နထာကလကတအခါ နဖြာပပနစလတ Style နတသေတမတဖြ သေးပါတယ။ အသေးပပပကနတာ -

a:hover { color: red;}

ဒလနရးသေားမယဆရင <a> Element နတက Mouse န နထာကလကတအခါ စာလးအနနရာင နပပာငးနပးမာပဖြစပါတယ။ :hover အပါအဝင Pseudo-class အများစက မညသေည Element န မဆ တဖြက အသေးပပနငပါတယ။ နဖြာပပခဂပးပဖြစတ Selector နတန လညး တဖြက အသေးပပနငပါတယ။ ဥပမာ -

#nav li:hover { background: green;}

p:hover a { color: lightblue;}

:visited Pseudo-class ကနတာ <a> Element န သောတဖြကအသေးပပနငပါတယ။ တစကကမသေားဖြး တ URL က ညနးထား တ Link နတက တစကကမမမသေားဖြးနသေးတ URL က ညနးဆထားတ Link နတန မတကပပားနအာင Style နတ သေတမတဖြ အတကသေးနငပါတယ။ Google Search တ Wikipedia တ လ Website နတမာနလလာကကညရငလညးနတ နငပါလမမယ။ မသေားဖြးနသေးတ Link နတက အနရာငတစမျ း၊ တစကကမသေားဖြးဂပးသေား Link နတက အနရာငတစမျ းခပခားနဖြာပပတကကကပါ တယ။ အမနနတာ ဒလခပခားနဖြာပပတာဟာ အသေးပပသေအတကများစာအနထာကအကပဖြစလ ကျနနတာတ ကလညး Link နတက :visited Pseudo-class သေးဂပး ကပပားနအာင Style နတသေတမတနပးထားသေငပါတယ။

a { color: blue;}



a:visited { color: gray;}

ဒလခပခားသေတမတနပးလကရင မသေားဖြးနသေးတ Link နတက စာလးအပပာန ပပနပးဂပး သေားဖြးဂပးသေား Link နတကနတာ ခနရာငစာလးန ပပသေနပးမာပပဖြစပါတယ။

:active Pseudo-class ကနတာ Element က Click နပလကတအခါ (သေ မဟတ) Touch လပလကတအခါ နဖြာပပနစလတ Style က သေတမတဖြ အသေးပပနငပါ တယ။ သေလညးပမညသေည Element န မဆတဖြကအသေးပပနငပါတယ။ ဒါနပမယ အသေးပပသေ Click နပလ ရမယ Element နတန သောတဖြကအသေးပပသေငပါတယ။

button:active { background: gray;}

:focus Pseudo-class က Form Input Element နတပဖြစတ <input> <textarea> <select> တန တဖြက အသေးပပနငပါတယ။ Element က Focus ပဖြစတအချနမာ ဘယလနဖြာပပရမလသေတမတဖြ အသေးပပနငပါတယ။

input[type=text] { background: white;}

input[type=text]:focus { background: yellow;}

ဒလ နရးသေားနပးလကပခငးအားပဖြင Text Input နတဟာ မလကနနာကခ အပဖြနရာငန နဖြာပပနနဂပး Element က Cursor နရာက လာဂပး Focus ပဖြစသေားတအခါမ နနာကခအနရာင အဝါနရာငန နပပာငးလနဖြာပပနပးမာပဖြစပါတယ။ နမနာမာ Pseudo-class က Attribute Selector န တဖြကအသေးပပထားတာကလညးသေတပပသေငပါတယ။ ဒလတဖြကအသေးပပလ ရပါတယ။

:first-child Pseudo-class ကနတာ Select လပထားတ Element နတထက ပထမဆး Element တစခတညးက ထးပခား နဖြာပပနစလ တ Style နတသေတမတဖြ သေးပါတယ။ :last-child Pseudo-class လညး သေနဘာတရားအတတပါပ။ :last-child က Select လပထားတ Element နတထက နနာကဆး Element တစခတညးကထးပခားနဖြာပပနစလ တ Style နတသေတမတဖြ သေးရတာပဖြစပါတယ။

#nav li:last-child { border: 0 none;}

#page p:first-child { font-weight: bold;}

Grouping Selectorsနဖြာပပခတ Selector နတက Group လပဂပးနတာလညး အသေးပပနငပါတယ။ နဖြာပပနစလတ Style တတအခါ CSS Rule နတက ထပခါထပခါ ပပနမနရးပ တစကကမတညးနရးလ ရနငမာပါ။



p.note { background: #efefef; font-size: 12px;}

#footer .copyright { background: #efefef; font-size: 12px;}

code { background: #efefef; font-size: 12px;}

နပးထားတနမနာမာ Rules နတက တနနတာကနတ နငပါတယ။ အမနနတာ အဒလတနနဂပဆရင ခလ တစကကမတညးနရးလကလ ရပါတယ။

p.note, #footer .copyright, code { background: #efefef; font-size: 12px;}

Selector နတက Comma (,) န တဂပး Group လပလကပခငးပဖြစပါတယ။

HTML5 န အတတဖြကပါဝငလာတ CSS3 မာဆရင Selector နတနရာ Pseudo-class နတပါ အခထက ပဂပးစစလငလငပါဝင လာပါနသေးတယ။ ထညသေငးနလလာသေငတ CSS3 Selector အချ က အခနး (၁၄) HTML5 မာထပမနဖြာပပနပးပါမယ။ Selector နတဟာ CSS မာ အနရးအကကးဆးပဖြစသေလ တစပခားနနရာနတမာလညးအသေးဝငပါနသေးတယ။ ဒ Selector နတကပ jQuery လ JavaScript Framework နတကပပနလညအသေးပပပါတယ။ ဂပးနတာ Emmet (a.k.a Zen Coding) ကသေ အသေးဝငတ Developer Tool နတကလညး CSS Selector နတကပ ထနရာကနအာငအသေးချထားပါနသေးတယ။ jQuery အနကကာငးက အခနး (၆) jQuery မာ နဖြာပပနပးမာပဖြစဂပး Emmet အနကကာငးကနတာ အခနး (၁၉) Tools and Utilities မာ နဖြာပပနပးမာပပဖြစ ပါတယ။

Basic Properties and Values

BackgroundLayout န ပကသေကတကစစနတမနလလာခင အနပခခကျတ CSS Property တစချ ကအရငကကညလက ချငပါတယ။ Element နတရ Background သေတမတဖြ အတက CSS Background Property (၅) ခ ရပါတယ။ အဒါနတကနတာ background-color, background-image, background-repeat, background-attachment န background-position တ ပ ပဖြစပါတယ။ ဒ Background Property နတဟာ တစခချငးစသေးနလရသေလ တဖြကဂပးနတာ လညး သေးနလရပါတယ။ Element နတရ နနာကခအနရာငသေကသေက သေတမတလရင background-color Property က သေးနငပါတယ။

p { background-color: yellow;}

background-color Property န တဖြကအသေးပပရတ Color Value အမျ းမျ း ရပါတယ။ black, white, red, green, blue, yellow, cyan, brown, gray စသေပဖြင Color Name နတကအသေးပပနငပါတယ။ ဒါနပမယ လကနတ မာ တစကယအနသေးစတအနရာငနတသေတမတလရင Color Name နတန မလနလာကနတာပါဘး။ ဒါနကကာင black



န white ကလရင ကျနတ Name နတက အသေးနညးပါတယ။

နနာကထပ Color Value အနနန အသေးပပနငတာကနတာ RGB Function ပဖြစပါတယ။ ကျနနတာတ နတ ပမငနနကက စလငတ အနရာငနတကနဖြာပပဖြ ကနပျတာ Screen နတက Red, Green, Blue ဆတ အနရာငသေးနရာငက လသေလနပါငးစပဂပးနတာ နဖြာပပနပးတာပဖြစပါတယ။ CSS မာလညး RGB Value နတသေတမတဂပး လချငတအနရာငကထညသေငးအသေးပပနငပါတယ။

p { background-color: rgb(255, 255, 0);}

ဒါလညးပ <p> Element နတက နနာကခအဝါနရာင သေတမတလကတာပ ပဖြစပါတယ။ rgb() Function က အသေးပပထားဂပး အထမာ Parameter သေးခအနနန Red, Green, Blue အစဉလကနပးရပါတယ။ သေတမတနပးနငတဂြဏနးတနဖြးနတကနတာ 0 ကနန 255 အထပဖြစပါတယ။ rgb(255, 0, 0) ဆရင Solid Red က ရမာပါ။ Red နနရာမာ 255 အပပညနပးထားဂပး ကျန Green န Blue အတက 0 သေတမတထားလ ပဖြစပါတယ။ အလားတပ rgb(0, 255, 0) ဆရင Solid Green, rgb(0, 0, 255) ဆရငနတာ Solid Blue အနရာငက ရရမာပပဖြစပါတယ။ rgb(0, 0, 0) က အနကနရာငပဖြစပါတယ။ ကနပျတာ Screen အတက အနရာငမရတာကအနကနရာငပဖြစပါတယ။ rgb(255, 255, 255) ဆရငနတာ အပဖြနရာငပဖြစပါတယ။ သေးခလး အပပညနပါငးစပလကရင ရနငတအလငးဆးအနရာငပဖြစတ အပဖြနရာငကရရပခငးပဖြစပါတယ။ rgb(200, 0, 0) ဆရငနတာ အနရငနရာငကရရမာပါ။ Red က အပပညမနပးပ 200 လ နပးထားဂပး Green န Blue က 0 ပဖြစနနတအတက အနကနရာငဘကကပါတ အန (အနရင) က ရရမာပဖြစပါတယ။ နမနာမာနတာ rgb(255, 255, 0) လ နရးထားပါတယ။ rgb() မာ Primary Color တစခပဖြစတ အဝါအတက အနရာငမပါနပမယ အနန အစမးကနရာစပလကရင အဝါနရာငရရတာပ ပဖြစပါတယ။

ပ (၃-ခ) CSS RGB Color

နနာကထပအသေးပပနငတ Color Value ကနတာ Hex Value ပပဖြစပါတယ။ Hexadecimal ဂြဏနးစနစန နရးသေားရပါတယ။

p { background-color: #FFFF00;}

Hex Value က နရ ဆးက # Sign န စနရးနပးရပါတယ။ နနာကမာနတာ (၆) လးတ Hexadecimal တနဖြးက နပးရပါတယ။ ကျနနတာတ နနစဉသေးနနကက Decimal Number system မာ 0 ကနန 9 အထ ဂြဏနး (၁၀) လးပါဝငပါတယ။ Hexadecimal မာနတာ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F ဆဂပး ဂြဏနး (၁၆) လးပါဝငတာပဖြစပါတယ။ Number System နတအနကကာငးကနတာ ဒနနရာမာ အနသေးစတမနပပာနငနတာပါဘး။ အကကမးဖြျငးအားပဖြင Hex တနဖြး FF ဟာ Decimal တနဖြး 255 န ညတယလ ပမတထားနစချငပါတယ။ ဒါနကကာင Hex Value မာ အနမဆးက 00 ပဖြစဂပး အပမငဆးက FF ပဖြစပါတယ။ နမနာမာနပးထားတ (၆) လးတ FFFF00 ဟာ R = FF, G = FF န B = 00 ဆတအဓပပါယပဖြစပါတယ။ Red န Green အတက အပမငဆးလကခနငတ FF လ သေတမတထားဂပး Green က 00 သေတမတထားတအတက သေလညးပအဝါနရာငက ရရမာပဖြစပါတယ။



ပ (၃-ဂြ) CSS Hex Color

မတချက ။ ။ Hax Value နတဟာ အပပညအစဆရင (၆)လးတနရးရနပမယ အတနကာကအနနန (၃) လးပနရးလ လညးရပါတယ။ ဥပမာ - #FFFF00 အစား #FF0 လ နရးနငပါတယ။ #88AADD အစား #8AD လ နရး နငပါတယ။ #FFFFFF အစား #FFF လ နရးနငပါတယ။ #000000 အစား #000 လ နရးနငပါတယ။ ဂပးနတာ စာလးအကကးအနသေးလညး ပပဿနာမရပါဘး။ နစသေကရာသေးနငပါတယ။ #ffff00 လ နရးသေားရငလညးအလပလပမာပပဖြစပါတယ။

Color Value နတအနကကာငးသေဂပဆရင Background Color သေတမတတာကလယသေားပါဂပ။ နဖြာပပခတ Color Name, RGB န Hex Value တ က background-color အတကတငမကပါဘး စာလးအနရာငနတ၊ Border အနရာငနတစသေပဖြင Color Value နပးလ ရတနနရာတငးမာ အသေးပပနငမာပဖြစပါတယ။

သေရနအာင RGB Color တကချကအလပလပပက ထညသေငးနဖြာထားနပမယ လကနတ မာ အနရာငနတ က ကယတငတကဂပးစပ နနဖြ မလပါဘး။ မျကစန ပမငနနတအနရာငက နထာကယလကယန Color Code နတ ပပနထတနပးတ Color Pick Tool နတ အများကကးရပါတယ။ ဒနနရာမာ အဆငအနပပဆးကနတာ ColorZilla လ နခါတ Firefox Addon ပပဖြစပါတယ။ ဒ Addon ထည သေငးလကရင Website နတနပါက ပမငနနရတအနရာငကနထာကယနငသေလ Color Circle နပါမာ အနရာငနတနပါငးစပဂပးနတာ လညး Color Code နတ ရယနငပါတယ။ Color Code ကလညး Hex, RGB, CSS3 Color Function နတထမာ တစခအပါ အဝငပဖြစတ HSL, Print Design မာသေးတ CMYK စသေပဖြင အမျ းမျ းက ပပနနပးနငပါတယ။ အကယ၍ စပထားတအနရာငက Color Name အနနန ရခရငလညး တဖြကနဖြာပပနပးပါတယ။ Web Developer နတအတကမရမပဖြစ Browser Addon ထမာ တစခအပါအဝငပဖြစပါတယ။

ပ (၃-ဃ) ColorZilla Firefox AddonLink: http://www.colorzilla.com/



Google Chrome န တစပခား Browser နတအတကလညး အလားတ Extension နတရပါတယ။ Install လပပန အသေးပပပ အနသေးစတကနတာ စာဖြတသေကယတငရာနဖြနလလာဂပး စမးသေပကကညနစချငပါတယ။

ကျနနတာတ နလလာလကစ CSS Background Property နတအနကကာငးပပနသေားပါမယ။ Background Image နတ ထညသေငး ဖြ အတက background-image Property က သေးနငပါတယ။ Background Image န ပကသေကဂပး အကန အသေတနစခရပါ တယ။ တစခက Element နတမာ Background Image တစခပရနငပါတယ။ Element တစခအတက Background Image နစခသေးခနပါငးစပသေတမတလ မရပါဘး။ နနာကတစချကကနတာ၊ Background Image ရ Size က CSS န သေတမတလ ရမာ မဟတပါဘး။ ဒါနကကာင Background အနနန Image က အသေးပပလတယဆရင အသေးပပလတ Size ရနအာင ကကတငပပငဆင နပးထားရမာပဖြစပါတယ။ ပက Element ထကကကးနနလ "နညးနညးနသေးဂပး Background အပဖြစသေးလကပါ" ဆတသေတမတ ချကမျ း CSS န မသေတမတ နငပါဘး။

မတချက ။ ။ CSS3 မာနတာ အခနပပာနနတ Multiple-Background နရာ Background-Size ပါ သေတမတလ ရလာပါဂပ။ ဒါနပမယ ဒစာနရးနနချနထ Browser Support ပငးမာ အားနညးနနနသေးသေလ အသေးပပမလညးသေပမတငကျယနသေးပါဘး။

ကျနနတာတ မာ alert.png ဆတ Image နလးတစခ ရတယဆကကပါစ ။

alert.png

ဒ Image နလးက <p class="alert"> Element အတက Background အပဖြစ အသေးပပလရင အခလနရးသေားနငပါတယ။

p.alert { background-image: url("alert.png");}

background-image Property အတက Value က url() Function န သေတမတနပးရတာပဖြစပါတယ။ url()အတငးမာ Image File ရနနတ Path လမးနကကာငးက ညနးဆနပးရပါတယ။ ရလဒအနနန အခလမျ းရရမာပဖြစပါတယ။

ပ (၃-င) CSS Background Image Property



<p> Element က ကကးနနဂပး alert.png Image က နသေးနနတအတက Browser က Repeat လပဂပးနဖြာပပသေားတအတက ဒလရလဒ ရရနနတာပဖြစပါတယ။ အဒ Repeat လပနဆာငချကကနတာ background-repeat Property န ပပပပငနငပါတယ။ ကျနနတာတ နရးထားတ CSS က ပဖြညစကပပငဆငလကပါမယ။

p.alert { background-image: url("alert.png"); background-repeat: no-repeat;}

background-repeat Property န တဖြကအသေးပပနငတ Value (၄) မျ း ရပါတယ။ repeat, repeat-x, repeat-y န no-repeat တ ပ ပဖြစပါတယ။ repeat ကနတာ Default Value ပဖြစပါတယ။ repeat-x ကနတာ Image Repeat က အလျားလက (Horizontal) ပ လပလတအခါ သေးပါတယ။ repeat-y ကနတာ Image Repeat က နဒါငလက (Vertical) ပ လပလတအခါ သေးပါတယ။ လကရအသေးပပထားတ no-repeat ကနတာ Repeat မလပပါန လ သေတမတလကပခငးပ ပဖြစပါ တယ။ ရလဒကနတာ အခလရရမာပဖြစပါတယ။

ပ (၃-စ) CSS Background Repeat

ပက အရအတငးပ သေးနပးထားဂပး Repeat မလပနတာတာက နတ ရမာပဖြစပါတယ။ ဆကလကဂပး Background Image ရ Position က background-position Property သေးဂပး သေတမတနပးနငပါတယ။

p.alert { background-image: url("alert.png"); background-repeat: no-repeat; background-position: top right;}

background-position Property အတက Value က နစခနပးရပါတယ။ Vertical Position န Horizontal Position ပဖြစပါတယ။ top နနရာမာ bottom သေ မဟတ center န လအပသေလအစားထး အသေးပပနငပါတယ။ right နနရာမာနတာ left သေ မဟတ center န လအပသေလ အစားထးအသေးပပ နငပါတယ။ top right လ သေးထားတအတက လကရရလဒ ကနတာအခလနပပာငးသေားမာပဖြစပါတယ။



ပ (၃-ဆ) CSS Background Position

မတချက ။ ။ Position Name နတန မဟတပ နနရာအတအကျလညး သေတမတနပး နငပါတယ။ ဥပမာ - background-position: 10px 20px; လ နကကပငာအသေးပပနငပါတယ။ ဒါဆရင Position က Element Left ကနန 10px န Element Top ကနန 20px ခာဂပး နနရာချထားနပးမာပဖြစပါတယ။

Background Property (၅) မျ းမာ (၄) မျ းနဖြာပပခပါဂပ။ ကျနတစမျ းပဖြစတ background-attachment ကနတာ Background Image က Screen Viewpoint န Attach ပဖြစနနနစလတအခါ အသေးပပရပါတယ။ background-attachment: fixed; လ နကကပငာအသေးပပရပါတယ။ ပမနဆရင Background က Document န Attach ပဖြစနနတာပဖြစပါတယ။ အသေးပပသေက Scrollbar ဆလကလ နဖြာပပတ Content နနရာနရ သေားရင Background လညးလကနရ သေားမာပါ။ background-attachment: fixed; လ သေတမတထားရငနတာ Scroll လပလကရငလညး Background Image က ပမငကငးကနန နပျာကကယမသေားပ ဆကလကတညရနနမာပဖြစပါတယ။

CSS မာ Shorthand လ နခါတ အတနကာကနရးနညး ရပါတယ။ Background Property အားလးက တစနကကာငးစ နလးငါးနကကာငးခနရးမနနပ အတနကာကနရးလ ရပါတယ။

p.alert { background: #FFFFDD url(alert.png) no-repeat top right;}

နမနာမာ background-color, background-image, background-repeat န background-position နလးမျ းလးအစား background ဆတ Property တစခတညးန Value နတ အားလးက တနးစ ထညနပးလကတာ ပဖြစပါတယ။ ဒနညးန အတနကာကနရးလ ရပါတယ။ ဒါနပမယ Value နတက Color → Image → Repeat → Attachment → Position အစအစဉအတငး မနနအာငနပးရပါတယ။ စလတ Value န စနငပါတယ။ နမနာမာ Color န စထားပါတယ၊ ဆနဒရရင Position ကနနစလညး ရပါတယ။ ဒါနပမယ နနာကကဆကလကတ Value ကနတာ အစအတငးမနနအာင နပးရမာပဖြစပါတယ။ အစအစဉ မမနရငအလပလပမာ မဟတပါဘး။ မထညလတ Value ရရငလညး ချနထားခလ ရပါတယ။ နမနာမာဆရင Attachment ကချန ထားခပါတယ။ ကျနနတာတရ နမနာက အားလး ပပညစသေားနအာင Property တစချ ထပပဖြညလကပါမယ။

p.alert { background: #FFD url(book-project/res/alert.png) no-repeat 10px center; border: 2px solid #DDA; padding: 10px 10px 10px 50px; border-radius: 5px;}



border, padding, border-radius Property နတ ထပပဖြညလကတာပါ။ ဒ Property နတအနကကာငးက မကကာခငမာ အနသေးစတ ရငးပပနပးမာပါ။ လကရရလဒကနတာ အခလရရမာပဖြစပါတယ။

ပ (၃-ဇ) CSS Background – နနာကဆးရလဒ

အခဆရင <p> Element တစခက Application Interface နတမာ နတ ပမငနနကက Warning Message အသေငန နဖြာပပ နပးနအာင CSS န ဖြနတးလကတာပပဖြစပါတယ။

Text and Fontစာလးအနရာင (Text Color) က CSS န သေတမတဖြ အတက color Property သေးရပါတယ။ Value အနနန ကနတာ Background Color မာ နဖြာပပခတ နညးလမးနတအတငးပ Color Value နတနပးရမာပဖြစပါတယ။ စာပဒနတက ဘယဘကက အညယမယ (သေ မဟတ) ညာဘကက အညယမယ စသေပဖြင Alignment လပဖြ အတက text-align Property က သေးရပါ တယ။ Value အနနန left, right, center, justify နလးမျ းအသေးပပနငပါတယ။

h1 { color: #224477; text-align: center;}

p { color: #555; text-align: justify;}

ကျနနတာတ စာရကနပါမာ လကန စာနတနရးတအခါ စာပဒတငးရ ပထမလငးက နဘးမျဉးကနန လကမဝကခာဂပးနရးကကနလ ရပါတယ။ ဒ သေနဘာက Web မာနတာအသေးနညးပါတယ။ နဘးမျဉးကနန လကမဝကခာတာက စာရကနပါမာဖြတလ နကာငးနပ မယ၊ Screen နပါမာ ဖြတရတာသေပအဆငမနပပပါဘး။ ဒါနကကာင အသေးနညးပါတယ။ သေးလတယဆရင text-indent Property က သေး နငပါတယ။

p { text-indent: 50px;}

စာလးနတက Underline တားဂပး နဖြာပပလတအခါ text-decoration Property က အသေးပပနငပါတယ။ လကနတ မာ



text-decoration Property က Underline နတပဖြတဖြ အတက ပအသေးများပါတယ။ <a> Element တစခ ထညသေငးလက ရင Browser နတကအလအနလျာက Underline တားဂပးနဖြာပပနလရပါတယ။ အဒလ Underline တားထားတာက မလချငတ အခါ text-decoration Property မာ Value က none လ သေတမတနပးနငပါတယ။

a { text-decoration: none;}

a:hover { text-decoration: underline;}

none န underline အပပင text-decoration Property န တဖြကအသေးပပလ ရတ Value နတကနတာ overline, line-through, blink တ ပ ပဖြစပါတယ။ overline ကနတာ အနတာကအသေးနညးပါတယ။ blink ကနတာ စာလးက မတတ မတတ ပဖြစနစချငရငသေးရတာပါ။ 90' နခတများက အသေးများခနပမယ ကနနနခတမာနတာ လးဝမသေးနတာသေနလာက အသေးနညးသေားပါဂပ။ line-through ကနတာ တစချ နနရာနတမာအသေးဝငပါတယ။ တစကယလကနတ မာနတာ none န underline သော အသေးအများဆးပဖြစပါတယ။

စာလးအသေငအပပင (Font) သေတမတဖြ အတက font-family Property က သေးရပါတယ။ Value အနနန အသေးပပလတ Font အပစက သေတမတနပးရပါတယ။

p { font-family: Arial, Helvetica, sans-serif;}

ဒလ အပစလကသေတမတတာက Fall Back အတက အသေးဝငပါတယ။ နပးထားတ နမနာအရ အသေးပပသေ စကထမာ Arial Font ရရင Browser က <p> Element နတက Arial န နဖြာပပမာပဖြစပါတယ။ မရရငနတာ Helvetica က အသေးပပနဖြာပပပါလမ မယ။ Helvetica လညး မရဘးဆရငနတာ sans-serif Font န နဖြာပပနပးမာပဖြစပါတယ။ သေတမတနပးထားတ Font နတ တစခမ အသေးပပသေစကထမာ မရဘးဆရငနတာ Browser Default Font န ပ နဖြာပပနပးမာ ပဖြစပါတယ။

Document ထမာ ပမနမာစာနတ ထညသေငးနရးသေားထားလ ပမနမာ Font နတ သေတမတချငရငလညး အခလ သေတမတနငပါတယ။

p { font-family: Padauk, Maynamr3, "Myanmar Text";}

"Myanmar Text" က Quote အဖြငအပတန နရးတာကသေတပပပါ။ သေက Font Name မာ Space ပါနနလ Quote အဖြငအပတ န နရးနပးဖြ လအပတာပဖြစပါတယ။ Myanmar Text Font ဆတာ Windows 8 မာ Default ပါဝငလာတ Myanmar Font ပဖြစပါ တယ။

မတချက ။ ။ ဒစာနရးနနချနမာ ပမနမာစာနရးဖြ အငတာနကမာ တငတငကျယကျယအသေးပပနနတာက Zawgyi Font ပဖြစပါတယ။ Zawgyi Font က အသေးပပလရငနတာ font-family: zawgyi-one; လ သေတမတနပးရမာပါ။ Zawgyi န နညးပညာတတ တစပခား တဖြက သေတမတစရာ Font တစခမမရလ တစခတညးပသေတမတနပးရနလရပါတယ။ Web Standards က အညအညတမလကနာနငခငက Web နညးပညာမာ အဆငမနပပတာနတရခသေလပ လကရကနပျတာသေ ပမနမာစာမာလညး Font နတမတတအတက အဆငမနပပတာနတရပါတယ။ ဒါနပမယ အခနနာကပငးနတာ ပမနမာစာအတကလညး Unicode Consortium က သေတမတထားတ ကနပျတာသေးဘာသောစကားဆငရာ နညးပညာစနတက ကျယကျယပပန ပပန လကနာလာကကပါဂပ။ Microsoft, Apple တ လ အဓက Operating System ထပလပသေနတက Unicode စလကနာတ ပမနမာ Font နတက သေတ OS နတမာ တစပါတညးထညသေငးနပးလာသေလ၊ Google, Wikipedia အစရတ အဓက Website နတ ကလညး သေတ Website နတမာ ပမနမာစာနတနဖြာပပဖြ Unicode စအတငး နဖြာပပအသေးပပလာကကဂပပဖြစပါတယ။ မကကာနတာတကာလမာ အခကက နတ နနရတ အဆငမနပပမနတ နပပလညသေားနတာမယလ နမျာလငပါတယ။ ဒအနကကာငးကစတဝငစားဖြ နကာငးသေလ Web Developer နတ



သေရထားသေငလ အနသေးစတနဖြာပပချငပါတယ။ ဒါနပမယ ကျနနတာတ နလလာလကစကနနလမးလသေားမာစးလ ချနခလကပါနတာမယ။

စာလးနတက Bold လပလတအခါ (သေ မဟတ) Bold လပထားတစာလးနတကနန Bold ပပနပဖြတလတ အခါ font-weight Property က သေးနငပါတယ။ font-weight: bold; ဆရင စာလးနတက Bold လပနပးမာပဖြစဂပး၊ font-weight: normal; ဆရင Bold လပထားတာက ပပနပဖြတနပးမာ ပဖြစပါတယ။ <h1> <h2> <h3> အစရတ Heading Element နတဟာ မလနဖြာပပပအရ Bold လပနဖြာပပကကနလရပါတယ။ မလချငဘးဆရင font-weight: normal; န ပပနပဖြတနပးရမာ ပဖြစ ပါတယ။

စာလးနတက Italic လပလတအခါ (သေ မဟတ) Italic လပထားတစာလးနတကနန Italic ပပနပဖြတလတ အခါ font-style Property က သေးနငပါတယ။ font-style: italic; ဆရင စာလးနတက Italic လပနပးမာ ပဖြစဂပး၊ font-style: normal; ဆရင Italic လပထားတာကပပနပဖြတနပးမာ ပဖြစပါတယ။

မတချက ။ ။ စာရကနပါမာရကနပနဖြာပပတစာပပဖြစပဖြစ၊ Web Document နပါမာ နဖြာပပတစာပပဖြစပဖြစ Typography လ နခါတ စာလးစစဉ နနရာချထားမအတကပညာက သေရထားမသော ဖြတရ သေကဖြတရတာရငးလငးနချာနမ ဂပး အဆငနပပတာပဖြစပါတယ။ ဒစာအပဟာ Design ထကစာရင Development ဘကကပဂပးအသေားနပးချငလ Typography အနကကာငး တစခနးကဏဍယဂပးမနဖြာပပနငပါဘး။ ဒါနပမယ မပဖြစမနန သေသေငတကစစနတကနတာ သေငသေလထညသေငးနဖြာပပနပးသေားပါမယ။

စာလးနတက Bold လပတယ Italic လပတယဆတာ နယဘယျအားပဖြင ပပမငသောနအာင Emphasis လပလကတာပါပ။ နစသေကတနညးလမးက အသေးပပနငနပမယ Bold လပဂပး အလနအမငး Emphasis လပထားတစာနတက ဖြတရ သေအတက ဖြတရတာနထာကနစပါတယ။ ပ (၃-ဈေ) မာ နငးယဉကကညနငပါတယ။

ပ (၃-ဈေ) Emphasis in Typography

စာလး Size နတသေတမတဖြ အတကနတာ font-size Property ကသေးနငပါတယ။ CSS မာ font-size အပါအဝင Size ပမာဏတနဖြးသေတမတဖြ အသေးပပနငတ Unit အမျ းမျ းရပါတယ။ px, pt, in, mm, em, % စသေပဖြငရကကပါတယ။ ဒါနပ မယ pt, in, mm အစရတ Unit နတက Screen အတကသေပအဆငမနပပပါဘး။ Screen Resolution ကာပခားချကနကကာင 1in ဟာတစကယ 1 inch န Screen နပါမာအဂမတမးတညဖြ မနသေချာပါဘး။ ဒါနကကာင အသေးနညးပါတယ။ အသေးများတ (၃) မျ းက px, em န % တ ပပဖြစကကပါတယ။ px Unit ကနတာ သေတမတလတ Size က "အတအကျ" သေတမတ လကတာပဖြစပါ



တယ။ font-size: 13px; လ သေတမတလကရင 13px ပမာဏရတစာလးအရယအစားန နဖြာပပနပးသေားမာပပဖြစပါတယ။

em န % ကနတာ Relative Unit လ နခါပါတယ။ Size က အတအကျ သေတမတတာမျ း မဟတပ font-size: 200%; လ သေတမတလကတာဟာ "ပမနသေးရမယ Size ထက နစဆကကးတ Size က သေးလကပါ" ဆတအဓပပါယပဖြစပါတယ။ font-size: 80%; ဆတာဟာ "ပမနသေးရမယ Size ထက နညးနညးနသေးဂပးသေးလကပါ" ဆတ အဓပပါယပပဖြစပါတယ။ နညးနညးနသေးလ နပပာလကတာပဖြစလ ဘယနလာကနသေးမလဆတာ Parent Element နပါမတညနန ပါတယ။ ဥပမာနလးန ကကည ချငပါတယ။ ကျနနတာတ မာ ဒလ Element Structure ရတယဆပါစ -

<body> <p> … <b> … </b> … </p></body>

<body> Element အတက Fix Size တစခ သေတမတနပးဂပး ကျန Element နတက Relative Unit ပဖြစတ % သေးပါမယ။

body { font-size: 16px;}

p { font-size: 200%; /* Generally equal to 32px */}

p b { font-size: 40%; /* Approximately 12px (40% of 32px) */}

မတချက ။ ။ CSS ထမာ မတချကနတ ထညသေငးနရးသေားလရင /* အဖြငန */ အပတကကားထမာ နရးသေားနငပါတယ။ လကနတ အလပ လပတအခါ /* */ ကကားထမာ နရးသေားထားတာနတက ထညသေငးအလပလပမာမဟတပါဘး။

em Unit ရ သေနဘာက % န ဆငပါတယ။ 1.5em ဆတာ "တစလးခစာ" ဆတ အဓပပါယပဖြစဂပး၊ 3em ဆတာ "သေးလးစာ" ဆတ အဓပပါယပဖြစပါတယ။ မလနဖြာပပရမယစာလးရ "သေးလးစာသေးဂပး နဖြာပပပါ" ဆနတာ "သေးဆကကးဂပး နဖြာပပပါ" လ နပပာလကတာန အတတပလ ဆနငပါတယ။ ဒါနပမယ ဒါက font-size မ လ ပါ။ တစပခား Size နတမာနတာ နညးနညးစဉးစားစရာရပါတယ။ width: 30em; ဆတာ Element ရ အကျယကစာလးအလး (၃၀) စာနပးလကပါလ ဆလတာပဖြစပါတယ။ width: 50%; ဆတာက သေတမတရမယအကျယရ ထကဝကပသေတမတလကပါလ ဆလတာပါ။ အဓပပါယပခငး သေပမတနတာပါဘး။ ဒါနကကာင em န % ဟာ font-size အတကနတာသေနဘာတရားတနပမယ တစပခား Size နတပဖြစတ Border Size, Width, Height, Margin, Padding အစရတ နနရာနတမာနတာ မတနတာပါဘး။

px လ Fixed Unit သေးသေငလား % န em လ Relative Unit သေးသေငလားဆတ အပငငးအခနကကနနထ Web Developer နတကကားထမာရနနဆပဖြစပါတယ။ တစချ ကနတာ Relative Unite နတဟာ တစခါတစရ ခန မနးရခကဂပး User Setting က မခနနလ Design ရ အနသေးစတ Detail က ထခကနစတယလ ဆကကပါတယ။ တစချ ကနတာ Fixed Unit နတသေးမယဆရင အသေးပပသေက Browser Function နတပဖြစတ Zoom-In/Zoom-Out တ အဆငနပပနပပအလပမလပနတာလ Accessibility ရ နဒါငအရ Relative Unit နတသောသေးသေငတယလ ဆကကပပနပါတယ။

မတချက ။ ။ ဒတယအဆက သေပမမနနတာပါဘး။ တစချနက လသေးများခတ Internet Explorer 6 မာ Font Size နတက px န သေတမတခရင Browser Zoom-Out လပလညး စာလးနတက ကကးမလာတာမျးပဖြစခပါတယ။ ဒါနပမယ ဒစာနရးနနချနမာ တစကမဘာလးအတငးအတာန Internet Explorer 6 အသေးပပသေ 1% နတာင မရနတာပါဘး။ လကရအဓက Browser အားလးက px န နပးထားလညး အဆငနပပနအာင



Zoom-In/Zoom-Out လပနပးနငကကပါတယ။

အားသောချကအားနညးချကဟာ နစမျ းလးမာရလ အသေးပပသေ Developer ရ နရးချယမကသော အဓကပဖြစပါတယ။ ကယရ Design Decision နပါမတညအသေးပပရမာပဖြစလ ဘာနတာသေးသေငတယ၊ ဘာက မသေးသေငဘးလ အနသေမတလ ရနငမာမဟတ ပါဘး။ သေငနတာတယလ ယဆတ Unit ကသောအသေးပပပါလ ဆချငပါတယ။ ကျနနတာကနတာ ဒအခနးမာ နဖြာပပမယ နမနာ အများစမာ px Unit ကသော သေးပါမယ။ အခနး (၁၇) Mobile Web ကျရငနတာ em န % နစခလးကအသေးပပဂပး နမနာနတက နဖြာပပနပးမာပဖြစပါတယ။

Typography အနနန သေတပပသေငတာတစခက၊ စာလးနတက Size နရးချယသေတမတတအခါ Balance လ နခါတ ညညတမျတမ ရနစဖြ အချ းလကအသေးပပသေငပါတယ။ စတကးန နကာငးမယထငသေလ သေတမတရင Balance မပဖြစလ ဖြတရတာမနချာနမ တာ မျ းပဖြစတကပါတယ။ ပ (၃-ည) မာ နမနာအချ းတစခကနဖြာပပနပးထားပါတယ။ နလလာကကညရ နငပါတယ။

ပ (၃-ည) Typographic Scale

Text နတန ပကသေကဂပး နနာကထပအသေးဝငတ Property ကနတာ line-height ပဖြစပါတယ။ စာနကကာငးတစကကာငးရ အပမငဘယနလာကရရမလ သေတမတဖြ အတကအသေးပပနငပါတယ။ ဥပမာ - font-size က 16px ပဖြစဂပးစာနကကာငးအပမင ကလညး 16px ပဖြစနနရင စာနကကာငးနတဟာ တစခန တစခ ကကတကပနနမာပဖြစပါတယ။ ဖြတလ သေပအဆငမနပပပါဘး။ Typography ရ နဒါငကနနအကကပပကကတာကနတာ line-height က စာလး Size ရ တစဆခသေတမတပခငးဟာ ဖြတရ ရ အဆငအနပပဆးပဖြစတယလ ဆကကပါတယ။ ဒါနကကာင ကျနနတာကနတာအဂမဒလသေးနလရပါတယ။

body { font-size: 16px; line-height: 1.5em;}

line-height က 1.5em လ နပပာလကနတာ နနာကပငး font-size နပပာငးလညး line-height က လကနပပာငး စရာမလနတာဘးနပါ။ line-height က အဂမတမး စာလးတစလးခစာနနရာယနနမာပပဖြစပါတယ။ အတအကျသေတမတချင ရငလညး ဥပမာအားပဖြင line-height: 22px; ဆဂပး အတအကျသေတမတနငပါတယ။



ပ (၃-ဋ) Line Height in Typography

ပ (၃-ဋ) မာသေငနတာတ Line Height က ဖြတရ နချာနမ မကနထာကအကပဖြစနစပက နဖြာပပနပးထားပါတယ။ Line Height န ပကသေကရင နနာကထပသေတပပသေငတာကနတာ Vertical Rhythm ပဖြစပါတယ။ တစချ စာပဒနတမာ သေးထားတာက Line Height တစမျ း တစချ စာပဒနတမာနနာကတစမျ းဆရငလညး ဖြတရ ရ မနချာနမ တာမျ းပဖြစတကပါတယ။ ပ (၃-ဌ) မာ နငးယဉ နလလာကကညနငပါတယ။

ပ (၃-ဌ) Vertical Rhythm in Typography

ဒကဏဍမာပဖြညစကမတသေားသေငတ Property နစခကနတာ letter-spacing န word-spacing တ ပ ပဖြစပါတယ။ စာလး တစလးန တစလးကကား အကာအနဝးကသေတမတဖြ letter-spacing က သေးနငပါတယ။ စကားစတစစန တစစကကား အကာ အနဝးက သေတမတချကရငနတာ word-spacing က သေးနငပါတယ။

p { letter-spacing: -1px; word-spacing: 4px;}



နမနနာမာ letter-spacing က -1px လ နပပာလကနတာ စာလးတစလးန တစလး ကာမသေားတအပပင ပဂပးကပသေားမာပဖြစပါ တယ။ Minus န လညး နပးလ ရတယဆတာ သေတပပမနအာင နဖြာပပနပးတာပါ။ စာလးနတအနကကာငး နပပာလကစန Typography မာထညသေငးသေတပပသေငတ အချကတစချကကပဖြညစကချငပါတယ။ အဒါကနတာ Measure လ နခါတစာပဒအကျယပဖြစပါတယ။ သေပကျယလနးရငဖြတရခကသေလ၊ သေပကျဉးလနးရငလညးဖြတရခကပါတယ။ မျတတအကျယကနတာ စာလး (၃၀) စာနလာကပဖြစ တယလ ဆကကပါတယ။ ဒါနကကာင ကျနနတာကနတာ စာပဒတငးက width Property သေးဂပး ဒလသေတမတနလရပါတယ။

p { font-size: 14px; width: 30em;}

ပ (၃-ဍ) မာ နငးယဉနလလာကကညပါ။

ပ (၃-ဍ) Measure in Typography

Styling Lists and Tables<ul> <ol> Element နတန Document ထမာ ထညသေငးထားတ List နတရ Bullet န Number Style သေတမတပနတက နဖြာပပနပးချငပါတယ။ list-style-type Property ကသေးဂပး Marker အပဖြစနဖြာပပနစလတ Number သေ မဟတ Bullet က သေတမတနငပါတယ။ တဖြကအသေးပပနငတ Value နတကနတာ circle(○), disc(●), square(■), decimal (1-2-3), lower-alpha (a-b-c), lower-roman (i-ii-iii), upper-alpha (A-B-C), upper-roman (I-II-III) တ ပ ပဖြစပါတယ။ armenian, georgian, greek စတ Value နတလညး ရနသေးနပ မယ အသေးနညးပါတယ။ list-style-type မသေတမတထားရင <ul> အတက disc က Default အနနန အသေးပပဂပး <ol> အတက decimal က Default အနနန အသေးပပနဖြာပပနပးမာပဖြစပါတယ။ Bullet နတ Number နတ မလချငလ ပဖြတပပစချငရင နတာ none က သေးရပါတယ။ List ဆတငး Bullet န နဖြာပပချငတာမဟတလ none ကလညးအသေးများပါတယ။

နနာကထပအသေးဝငတ List Property ကနတာ list-style-image ပဖြစပါတယ။ List Marker ပဖြစတ Bullet နတ Number



နတအစား Icon Image နလးနတန နဖြာပပလရငအသေပပနငပါတယ။

ul { list-style-image: url(arrow.png);}

list-style-image အတက Value က background-image မာလပ url() န သေတမတနပးရပါတယ။

<table> Element က Style နတသေတမတနငဖြ အတက ပဖြညစကနလလာရမယ Property နစခရပါတယ။ border-spacing န border-collapse တ ပပဖြစပါတယ။ border-spacing Property က Table Cell နတ တစခနတစခကကားက အကာ အနဝးသေတမတဖြ အသေးပပရပါတယ။ border-collapse ကနတာ Table Cell နတမာ ဘယလ Border Style ကအသေးပပရ မလသေတမတဖြ အသေးပပရပါတယ။

ပ (၃-ဎ) မာနဖြာပပနပးထားတ Table Style ရနအာင ဒလနရးသေား နပးရမာပဖြစပါတယ။

table { border-spacing: 1px; background: #247; }

td { background: white; border-collapse: collapse; }

th { color: white; }

ပ (၃-ဎ) CSS Table Style



နမနာမာ border-spacing: 1px; က table အတက သေတမတနပးဂပး border-collapse: collapse; ကနတာ td အတက သေတမတနပးထားတာပဖြစပါတယ။ အမနနတာ အခနမနာမာ၊ Cell နတကကားထကနတ နနရတ Border ပစလငးနတက Border မဟတပါဘး။ Table Background Color က Cell နတကကားထမာရနနတ Space ကနန ပမငနတ နနရလ Border လငး နလးနတလ ထငစရာပဖြစနနတာပဖြစပါတယ။ ဒနညးလမးက Table နတက Border လငးနတန နဖြာပပလတအခါအသေးပပနလရတ နညးလမးပပဖြစပါတယ။

အခဆရင CSS အနပခခ Property နတ စသေနလာကရသေားပါဂပ။ ဒါနပမယ CSS က ဘယနားမာနရးဂပး HTML Document န ဘယလချတဆကရလမနပပာရနသေးပါဘး။ ဆကကကညချငပါတယ။

External CSSCSS Rule ထညသေငးနရးသေားထားတ File နတက css Extension န သေမးဆညးနပးရပါတယ (ဥပမာ - style.css, layout.css, widget.css)။ ဂပးခတ HTML အခနးမာ နပပာခသေလပ File တစခဟာ ဘာ File လဆတာက ကနပျတာက ဆးပဖြတဖြ File ရ Content-Type Attribute ကအဓက ပဖြစပါတယ။ ဒါနပမယ File Extension က css သေမးဆညးနပးလကရင Content-Type Attribute က သေးပခားသေတမတနနစရာမလနတာပ ကနပျတာက CSS Style File မနးသေရသေားနစမာပဖြစ ပါတယ။

CSS File နတက Web Document ထမာ ချတဆကအသေးပပလရင <link> Element ကအသေးပပချတဆကရပါတယ။ ဥပမာ -

<link rel="stylesheet" href="style.css">

<link> Element က Favicon, RSS အစရတ တစပခား Resource နတန ချတဆကဖြ လညးသေးနသေးတအတက rel Attribute မာ stylesheet လ သေတမတနပးဖြ အပပါတယ။ href Attribute မာနတာ CSS File ရနနတ URL က ထညသေငးနပးရပါ တယ။ ဒလချတဆကနပးလကပခငးဟာ ဒ Document ကနဖြာပပတအခါ style.css ထမာ သေတမတထားတအတငး နဖြာပပနပးပါ လ နကကပငာလကပခငးလညးပဖြစပါတယ။

<link> Element က နစသေကရာနနရာမာထညသေငးနငနပမယ၊ နကကပငာချကတစမျ းပဖြစလ <head> Element အတငးမာထည သေငးနပးမပမထနရာကမာပဖြစပါတယ။ ဥပမာ - Browser က <body> Element ထကအချကအလကနတကမနဖြာပပခင ဘယလ Style န နဖြာပပရမလကကတငပပငဆငနငလ နဖြာပပတအခါ ပမနချာနမ အဆငနပပနစမာပဖြစပါတယ။ ဒါနကကာင <link> Element က <head> Element အတငးမာပထညသေငးသေငပါတယ။

ဒလ css Extension န သေမးဆညးထားတ CSS Style File နတဟာ HTML Document န မသေကဆငပသေးပခားပဖြစနနနစတ အတက External CSS လ နခါပါတယ။ External CSS ရ အားသောချက နစချကရပါတယ။ နပါတ (၁) ကနတာ Style နတကခ ထတလကတအတက HTML Document ဟာ Semantic Data Structure အပဖြစသေးပခားရပတညနငသေားမာပပဖြစပါ တယ။ CSS က ဖြနတးတထငရတ ရညရယချကကလညး ဒရညရယချကန ပတထငခတာပဖြစပါတယ။

နပါတ (၂) ကနတာ CSS Style File တစခက HTML Document နပါငးများစာက ချတဆကရယအသေးပပနငလ တညတ Style နတက ထပခါထပခါပပနနရးစရာမလနတာတ Reusable အားသောချကရရသေားနစပါတယ။ ဒလ Style File တစခက နဝမျသေးတ အတက ပပငဆငမနတပပလပဖြ လအပလာရငလညး Style File မာ ပပငလကယန ချတဆကရယဂပးသေးထားတ Document အားလး ကတစဂပ ငတညး Effect ပဖြစနစမာပဖြစလ များစာလယကသေားနစမာပဖြစပါတယ။ ဂပးနတာ Cache အားသောချကကလညးရပါနသေး တယ။ Document တစခက ရယလကတအခါ သေကဆငရာချတဆကထားတ Style File ကပါ Browser က Cache လပထားနင မာပဖြစပါတယ။ အဒ Style File ကပသေးထားတနနာက Document တစခကရယတအခါမာ Style File က အတတပပဖြစလ ထပယ စရာမလနတာပ Cache လပထားတာကအသေးပပနငတအတက Performance ပငးမာပမနကာငးမနသေားမာပပဖြစပါတယ။ ဒါနကကာင နညးလမးအမျ းမျ းရတအနကက ဒ External CSS နညးကပ လကနတ မာအသေးပပသေငတာပဖြစပါတယ။



Internal CSSနနာကထပနညးလမးတစခအနနန CSS နတက HTML Document အတငးမာ <style> Element သေးဂပး ထညသေငးနရးသေား နငပါတယ။ HTML Document ထမာ နရးသေားထားလ Internal CSS လ နခါပါတယ။ Document တစခတညးအတက သေးပခား သေတမတဖြ လအပတ Style နတ နရးသေားဖြ အသေးဝငပါတယ။ External CSS ကရတ Style နတသေးပခားခထတနငပခငးန Reusable အားသောချက နတနတာ Internal CSS မာ ရရမာမဟတပါဘး။ သေလညးပ နစသေကရာနနရာမာ နရးသေားနငနပမယ <head> Element အတငးမာ နရးသေားသေငပါတယ။

<style> body { font-size: 16px; line-height: 1.5em; color: #222; } h1 { font-size: 21px; font-weight: normal; } … </style>

<style> Element အတက အရငက type="text/css" ဆတ Attribute ထညသေငးနပးရနလရပါတယ။ ဒါနပမယ လကနတ မာ CSS အပပင တစပခားတငတငကျယကျယသေးတ Style Language မရသေလ type Attribute မရတအခါ Browser နတကအလအနလျာက CSS လ နားလညနပးသေားမာပဖြစလ ထညစရာမလအပနတာပါဘး။

Inline CSSနနာကတစနညးကနတာ သေကဆငရာ Element မာ style Attribute ကသေးဂပး နရးသေားပခငးပပဖြစ ပါတယ။ Element န အတတ ဖြကသေတမတထားလ Inline CSS လ နခါပါတယ။ သေကဆငရာ Element န အတတဖြကနရးသေားတာပဖြစလ သေ မာ Selector နတာ မလနတာပါဘး။ Property န Value နတချညးပနရးသေားနပးရမာပဖြစပါတယ။

<p style="color:red; font-style:italic;"> … </p>

Inline CSS ကနတာ အတကနငဆး နရာငရမာပဖြစပါတယ။ မသေးနလနကာငးနလပါပ။ Style နတကသော HTML Element နတန တနရးချငရင CSS နတာင ကျနနတာတ သေးမနနပါဘး။ HTML မာလညး <font> <center> တ လ Style သေတမတတ Element နတ bgcolor, borderတလ Style သေတမတတ Attribute နတ ရနနလ စကတညးက ဒ Element န Attribute နတအသေးပပလကယပါပ။

Inline CSS အသေးဝငတနနရာနတာရပါတယ။ အဒါကနတာ JavaScript န Interactive User Interface နတတညနဆာကတ နနရာမာပပဖြစပါတယ။ JavaScript ကနနလအပတ Interface Interaction ကရရဖြ Inline CSS ကသေငနတာသေလ အသေးပပသေား မာပဖြစပါတယ။ နနာကတစခနးမာ JavaScript နလလာတ အခါနတ ရမာပပဖြစပါတယ။ လရငးကနတာ Inline CSS ဟာ JavaScript န တဖြကအသေးပပဖြ အသေးဝငနပမယ Document Style သေကမတဖြ သေကသေကအတကဆရင အသေးမပပသေငတ နညးလမးတစမျ းပပဖြစပါတယ။

Multiple Stylesheets and Cascading OrderBrowser က Style န ပကသေကဂပး အလပလပတအခါ Default External Style Internal Style Inline Style → → → ဆတ အစအစဉအတငးလပသေားနလရပါတယ။ ဒါက Cascading Order လ လညး နခါပါတယ။ ရသေမျ Style နတအားလးက အစအစဉ အတငးအလပလပနပးသေားတာပဖြစပါတယ။

Element တစခအတက External Style အနနန နရးထားတ Rule န Internal Style အနနန နရးသေားထားတ Rule ထပနန



ခရင၊ နနာကမအလပလပတ Internal Rule က External Rule က Overwrite လပသေားလ Internal Rule ကသောအတညပဖြစနန နစမာပဖြစပါတယ။ Inline Style နတက နတာ နနာကဆးမအလပလပလ Inline Style သောသေတမတထားရင ကျနအားလးက Overwrite လပသေားမာပဖြစပါတယ။

လကနတ မာ HTML Document တစခန ချတဆကအသေးပပတ External Style နတလညး တစခထက ပရတကပါတယ။ ဒ External Style နတထမာက တစခန တစခ ပပနထပနနတ Rule နတလညးရတကပါတယ။ အရးရငးဆးနားလညထားနစချင တာက၊ Browser နတက CSS Rule နတက အနပခခအားပဖြင တစလငးချငး (Line-by-Line) အစအစဉအတငးအလပလပသေား တယလ နားလညနစချငပါတယ။ ဒါနကကာင Rule နတ ထပလာတအခါ အရငသေတမတခတ Rule က နနာကမသေတမတတ Rule က Overwrite လပသေားမာပပဖြစပါတယ။ <link> Element န ချတဆကတအခါ နနာကမချတဆကတ CSS File ထက Style နတကအရငချတဆကထားတ File ထက Style နတက (ထပနနခရင) Overwrite လပသေားမာပပဖြစပါတယ။

/* First Declaration for <h3> */h3 { font-size: 18px; text-align: center; color: red;}

…

/* Another Declaration for <h3> again */h3 { font-size: 21px; text-align: left;}

နပးထားတ နမနာမာ h3 Selector သေးဂပးနရးထားတ CSS Rule က နစကကမပဖြစနနပါတယ။ ပထမတစကကမမာ font-size, text-align န color တ သေတမတထားဂပး နနာကတစကကမ မာနတာ font-size န text-align က ထပသေတမတ ထားပါတယ။ နစခါနရးထားနပမယ တစကယပပနထပတာက font-size န text-align သောပဖြစပါတယ။ color က နနာကတစခါ ထပမနကကပငာလ ပပနမထပနတာပါဘး။ h3 အတက နပါငးစပလကတ နနာကဆးရလဒကနတာ အခလပဖြစသေားမာပါ။

h3 { font-size: 21px; text-align: left; color: red;}

Rule နတထပလာတအခါ အနပခခအားပဖြင ဒနညးန အလပလပပါတယ။ ဒါနပမယ Priority လ နခါတ ဦးစားနပးနတနတာရ ပါတယ။ ဥပမာ Element တစခမာ ID နရာ Class ပါ သေတမတထားတယ ဆပါစ ။

[HTML]<p id="note" class="note"> … </p>

[CSS]#note { background-color: #FFFFDD;}

.note { background-color: yellow;}



Element တစခတညးကပ ID န တစခါ Class န တစခါ Select လပဂပး နရးထားတာပဖြစပါတယ။ Class န Select လပဂပးနရး တာကနနာကမပဖြစနပမယ ဒနနရာမာ ID န Select လပဂပးနရးထားတ background-color: #FFFFDD; ကပ အတညယ သေားမာပဖြစပါတယ။ ID Selector ဟာ Class Selector ထက Priority ပမငလ ပဖြစပါတယ။ Priority က ပဂပးတကျတ Selector နတက ဦးစားနပးတာ ပဖြစပါတယ။

#nav li a { text-decoration: underline;}

li a { text-decoration: none;}

ဒနစမာဆရငလညး li a Selector က နနာကမနရးနပမယ ပဂပးတကျတ #nav li a Selector န နရးသေားထားတ text-decoration: underline; ကသော အတညယအသေးပပနပးသေားမာပပဖြစပါတယ။ Priority က !important Marker သေးဂပး Force လပလ နတာရပါတယ။ ဥပမာ -

#nav li a { text-decoration: underline;}

li a { text-decoration: none !important;}

Priority အရ #nav li a က ပမငနပမယ li a ထက text-decoration: none မာ !important Marker ပါနန တအတက အဒ text-decoration: none က ဦးစားနပးဂပး အတညယနပးသေားမာပပဖြစပါတယ။

Display TypesHTML Element နတက Display Type နပါမတညဂပး အဓကအားပဖြငနစအပစခလ ရပါတယ။ Block န Inline တ ပဖြစပါတယ။

Block Element နတဟာ Parent Element ရ အကျယ (Width) ရသေနလာက နနရာအပပညယတ Element အမျ းအစားနတ ပဖြစပါတယ။ လအပရင width န height Property နတသေးဂပး အကျယန အပမငက လသေလသေတမတနငပါတယ။ ထးပခားတာ ကနတာသေတ ရနဘးမာ တစပခား Element နတကနနရာမနပးပ၊ နနာကတစလငးကဆငးဂပးနဖြာပပနစတာပပဖြစပါတယ။ <h1> ကနန <h6> <p> <ul> <li> Element နတဟာ Block Element နတပပဖြစပါတယ။

Inline Element နတကနတာ Block န နပပာငးပပနပဖြစပါတယ။ Element Content ရသေနလာကပ အဂမနနရာယပါတယ။ အကျယ န အပမငက ပပပပငသေတမတလ မရပါဘး။ အဂမတမး Element Content ရသေနလာကသော နနရာယတ Element နတပပဖြစပါတယ။ Inline ဆတအတငးလငးတစခအတငးက အစတအပငးတစခပဖြစလ တစပခား Inline Element နတန နဘးချငးယဉလျကနဖြာပပ နပးမာပဖြစပါတယ။ နဘးချငးယဉနဖြာပပနပးဖြ နနရာမဆန နတာမသော နနာကတစလးကဆငးဂပးနဖြာပပနလရတ Element များပ ပဖြစပါတယ။ <b> <i> <em> <strong> အပါအဝင Formatting Element နတန <a> Element တ ဟာ Inline Element များပပဖြစပါတယ။

Element နတရ Display Type က display Property န နပပာငးလသေတမတလ ရပါတယ။ ဥပမာ - Inline Element ပဖြစတ <a> Element က Block နပပာငးလရင အခလသေတမတနငပါတယ။

a { display: block;}



အလားတပ Block Element နတက Inline အပဖြစနပပာငးလသေတမတလရငလညး display: inline; လ နကကပငာသေတ မတနငပါတယ။ ဒါနပမယ Block က Inline နပပာငးဖြ လခပါတယ။ အများအားပဖြင Inline Element နတကသော Block နပပာငး ကကနလရပါတယ။ နပပာငးတ ရညရယချကက width, height Property နတန အပမငန အကျယတ က သေတမတလလ နပပာငး ကကတသေနဘာပဖြစပါတယ။ Inline Element နတက သေဘာဝအရအပမငန အကျယက သေတမတနပးလ မရတအတက သေတ က Block နပပာငးဂပးမ သေတမတရတာပဖြစပါတယ။ ဥပမာ <a> Element တစခအတက အခလ သေတမတနရးသေားနငပါတယ။

a { display: block; width: 200px; height: 40px; text-align: center; line-height: 40px; text-decoration: none; background-color: #519B7E; color: #FFF; border-radius: 20px;}

ဒလနရးသေားသေတမတလကရင ရရမယရလဒကနတာ ဒလပစရရမာပဖြစပါတယ။

ရးရး Link တစခက Button တစခန တနအာင လးဝနပပာငးလပပစလကတာပါ။ ဒနနရာမာ display: block; သေတမတခ လ သော ဆကလကသေတမတထားတ width န height အလပလပသေားတာပဖြစ ပါတယ။ နမနာမာ ကျနနတာတ မနလလာရ နသေးတ Property က border-radius တစခသော ပါဝငပါတယ။ ကျန Property အားလးက နလလာခဂပးသေားနတကသော နပါငးစပအသေးပပလကတာပါ။ ထးပခားချကအနနန line-height က height န အတတနပးထားက သေတထားပါ။ height န line-height ညနနတအတက စာလးကလညး အနပါနအာကအကာအနဝးညဂပးအလယနရာကနနတာပါ။ CSS မာ Element န စာနတက Horizontal Align အတကလပလရင text-align Property သေးဂပး သေတမတလ ရပါတယ။ ဒါနပမယ Vertical Align က နညးနညးနခါငးစားပါတယ။ Vertical Align က Center လပလတအခါ အသေးပပနလရတ နညးလမးတစခက တစပါ တညးထညသေငးနဖြာပပလကပခငးပဖြစပါတယ။

LayoutsWeb Document နတအတက Layout နတ ဖြနတးတအခါ Block Element နတကပ အသေးပပရပါတယ။ အသေးပပကကနလရတ Element ကနတာ <div> Element ပပဖြစပါတယ။ <div> Element ဟာ Block Element တစမျ းပဖြစဂပး Generic Element လ နခါကကပါတယ။ သေ က ဘယနနရာမာသေးရမယလ အတအကျသေတမတထားပခငး မရပ Block တစခလအပတ နနရာတငးမာ သေးနငတ Element ပဖြစပါတယ။ Block တစခလအပဂပး တစပခားသေငနတာတ Element မရတအချနမာ <div> က အသေးပပရ ပါတယ။

မတချက ။ ။ <div> လပ အသေးများတ နနာက Generic Element တစခက <span> ပဖြစပါတယ။ သေကနတာ Inline Element ပါ။ Inline Element တစခလအပဂပး တစပခားသေငနတာတ Element မရရင <span> Element က အသေးပပနငပါတယ။

Layout နတဖြနတးဖြ အတက float Property က အသေးပပကကရပါတယ။ float Property ဟာ Block နတက ဘယဘက (သေ မဟတ) ညာဘကကပနဖြာပပဖြ သေတမတရတ Property ပဖြစပါတယ။ ပမနဆရင Block Element နတဟာ နနရာအပပညယဂပး သေတ နဘးမာတစပခား Element ကလကမခပါဘး။ ဒါနပမယ float လပလကတအခါမာနတာ တစဘကကပဂပး လမးဖြယနပး လကတသေနဘာပဖြစသေားပါတယ။ လမးဖြယနပးလကတအတက တစပခား Element နတက နဘးမာ နနရာဝငယမယဆ ဝငယလ



ရသေားတသေနဘာ ပဖြစပါတယ။ ပ (၃-ဏ) မာ နငးယဉနလလာကကညပါ။

ပ (၃-ဏ) CSS Layout

ပ (၃-ဏ) မာ (A) န (B) ဆဂပး နမနာနစခ ပါဝငပါတယ။ A မာ Block Element (၄) ခက width, height, background-color ကယစသေတမတနပးထားပါတယ။ Block နတပဖြစလ Width ဘယလပ သေတမတနပးထားထား တစခနပါတစခဆငဂပးနတာသော နဖြာပပနပးနနတာကနတ ရမာပါ။

(B) မာနတာ float Property နတပဖြညစကအသေးပပပပထားပါတယ။ width: 600px သေတမတထားတ Main Content က float: left နပပာလကနတာ သေကနဘးကပဂပးလမးဖြယနပးပါတယ။ ဒါနပမယ width: 200px နပးထား Element ကလညး Block ပဖြစနနနတာ သေက သေများနဘးက မဝငချငပါဘး။ ဒါနကကာင သေ ကလညး float: left ထညနပးလကရပါ တယ။ အဒနတာမ လတနနတနနရာမာ ဝငကပဂပးနနရာယသေားမာပဖြစပါတယ။

ထးပခားချကကနတာ နအာကဆး Element မာ clear: both ဆတ နကကပငာချက ထညသေငးထားပခငးပ ပဖြစပါတယ။ ဆလတာက float လပဂပး လမးဖြယထားတ Element နတန မပကသေကန ဆတသေနဘာပဖြစပါတယ။ ဒနတာမ သေ အထကက float လပထားတ Element နတန လတကငးတ နနရာမာနဖြာပပနပးမာ ပဖြစပါတယ။

float န clear ဆကစပမလရငးကနပပာရရင "Block နတက နဘးချငးကပလရင float လပပါ။ မကပလ နတာတ Element မာ clear ပပနလပနပးပါ" ဆတ သေနဘာပပဖြစပါတယ။ ဒနညးန လချငတ Layout Design အတက Block နတက နနရာသေတ မတချထားနပးနငမာပပဖြစပါတယ။

ပ (၃-ဏ) မာ (B) နဖြာပပထားတ Layout နမနာအပပညအစက ကယတငစမးသေပကကညနငဖြ အပပညအစ နရးသေားနဖြာပပလကပါတယ။ layout.html ဆတ File Name န ကးယစမးသေပကကညပါ။

<!doctype html> <html> <head> <title>CSS Layout</title> <style> .wrap { width: 800px; margin: 20px auto;



} .header { height: 100px; background: #cb1212; } .content { width: 600px; height: 400px; background: #519b7e; float: left; } .sidebar { width: 200px; height: 400px; background: #1635a6; float: left; } .footer { height: 60px; background: #333; clear: both; } </style> </head> <body> <div class="wrap"> <div class="header"></div> <div class="content"></div> <div class="sidebar"></div> <div class="footer"></div> </div> </body> </html>

လကနတ စမးသေပကကညတအခါ File တစခတညးန အားလးစမးနငနအာငလ CSS က Internal <style> Element အသေးပပဂပး နရးသေားထားပါတယ။ ကးယဂပး တစချ Property နတက ပပငဆငစမးသေပ ကကညနစချငပါတယ။

မတချက ။ ။ .wrap အတက ထညသေငးနရးသေားထားတ margin: 20 auto; ရ အဓပပါယက မကကာခင ဆကလကရငးပပနပးပါမယ။ .wrap က width: 800px နပးထားတအတက .header န .footer မာ ပ (၃-ဏ) မာ width ထပမသေတမတမနပးနတာတာကလညး သေတပပပါ။ Block Element နတဟာ width သေတမတမထားရင Parent Width ရသေနလာက အလလနနရာယမာပဖြစပါတယ။

ပ (၃-တ) CSS Layout – Float များ Clear လပနညးတစမျ း



ပ (၃-တ) မာ float နတက clear လပနညး နနာကတစမျ းက နဖြာပပနပးထားပါတယ။ Parent Element မာ overflow: hidden; ဆတ Property န Value ထညသေငးနပးလကပခငးက သေ အတငးထက Child Element နတမာ သေတမတ ထားတ float နတက အလလ clear လပနပးသေားနစပါတယ။ ဒါနကကာင နအာကဆးက Element မာ clear: both လ ထပနကကပငာ စရာမလအပနတာပါဘး။ ဒနညးကလညး Layout ဖြနတးတနနရာမာ အနတာအသေးဝငတ နညးလမးတစခပပဖြစပါတယ။

Box ModelBlock Element နတက width န height အပပင border, margin န padding လညးသေတမတလ ရပါ တယ။ margin ဆတာ Element Border အပပငမာ နနရာလတက သေတမတတာပဖြစဂပး padding ကနတာ Element န Element Content တ ကကားက နနရာလတကသေတမတတာပ ပဖြစပါတယ။ ပ (၃-ထ) မာကကညပါ။

ပ (၃-ထ) CSS Box Model

Block တစခအတက Box Property နတ အပပညအစသေတမတထားတ ဥပမာနဖြာပပပါမယ။

#content { width: 600px; height: 380px; border: 4px solid #519b7e; margin: 20px; padding: 10px; background: #ffd;}

width န height Property နတအတက အထးအနထထပနပပာဖြ မလနတာပါဘး။ border Property မာနတာ အနညးငယ ထးပခားပါတယ။ Element တစခအတက Border သေတမတတအခါ (၃)မျ း သေတမတရနလရပါတယ။ border-size, border-style န border-color တ ပပဖြစပါတယ။ ဒသေးမျ း မပပညစရင Border လညး မပပညစပါဘး။ ဒါနကကာင Border Property နတက သေနကကာငးခဂပးမနရးကက ပါဘး။ border ဆဂပး အတနကာက တစနကကာငးတညးပနရးကကနလရပါတယ။ Value နနရာမာသော Size, Style, Color သေးမျ းလး အစဉလကတနးစသေတမတနပးပါတယ။ Size နနရာမာ နစသေကတ Unit ကသေးဂပး သေတမတလတပမာဏက နပးနငပါတယ။ Style နနရာမာနတာ (၃) မျ း သေးနငပါတယ။ solid ( ___ ), dotted ( .. ) … န



dashed ( ----- ) တ ပ ပဖြစပါတယ။ ကျနတ Style နတ ရနသေးနပမယ အနတာနလးအသေးနညးပါတယ။ Color နနရာမာလညး နစသေကရာအနရာငသေတမတနပးနငပါတယ။

Border အပပငဘကကနနရာလတပဖြစတ Margin သေတမတဖြ အတက margin Property ကပသေးရပါတယ။ Block တစခမာ Top, Right, Bottom, Left ဆဂပး မျကနာစာနလးဘကရလ margin: 20px; ဆတာ နလးဘကစလးအတက 20px အကျယ ရတနနရာလတယပါလ သေတမတလကတာပါပ။ တစဘကစ သေတမတလရင margin-top, margin-right, margin-bottom, margin-left ဆဂပး သေးပခားသေတမတနပးနငပါတယ။ margin ကပ အတနကာကသေနဘာမျ းသေးဂပး နလးဘကလးအတက Value နတ တနးစနပးနငပါတယ။

ဥပမာ - margin: 10px 20px 0 5px; ရ အဓပပါယက margin-top: 10px; margin-right: 20px; margin-bottom: 0; margin-left: 5px; န အတတပ ပဖြစပါတယ။ Value က Top, Right, Bottom, Left အစ အစဉအတငး သေတမတနပးရတာပဖြစပါတယ။ margin: 10px 20px; ဆဂပး Value မာ နစခတညးနပးဂပးနတာလညးသေတ မတနငပါတယ။ အဓပပါယက Top/Bottom အတက 10px စ နနရာလတယဂပး Left/Right အတက 20px စနနရာလတ ယလက ပါလ သေတမတတာပဖြစပါတယ။

ထးပခားချကတစခရပါတယ။ margin-left န margin-right အတက Value က တနဖြးနတ မသေတမတပ auto လ သေတမတနငပါတယ။ ဒါဆရင ဘယဘကကနနရာလတန ညာဘကကနနရာလတ ညနအာငအလလညဂပးယနပးသေားမာပဖြစလ Element က အလယတညတညက နရာကရသေားမာပဖြစပါတယ။ Layout အတက နမနပးခတနးက အသေးပပခတ margin: 20px auto; ဆတာ margin Top/Bottom က 20px လ သေတမတဂပး Left/Right က auto လ သေတမတလကတာပ ပဖြစပါ တယ။ ဒါနကကာင အဒနမနာ Layout က စမးသေပကကညရငအလယမာနဖြာပပနနတာကနတ ရမာပဖြစပါတယ။

မတချက ။ ။ တနဖြးနတသေတမတတအခါ 0 ဆရင နနာကကယနစနတက မထညရငလညး ရပါတယ။

Border န Element Content ကကားကနနရာလတပဖြစတ padding နကကပငာသေတမတပဟာ Margin န သေနဘာတရားအတတ ပပဖြစပါတယ။ margin Property အစား padding Property သေးလကတာပ ကာပါတယ။ သေလညးပ padding-top, padding-right, padding-bottom, padding-left ဆဂပး တစဘကစခဂပးသေတမတနငသေလ margin လ ပ Value နလးမျ းလးတနးစ နပးဂပး အတနကာကလညးသေတမတနငပါတယ။

မတချက ။ ။ margin အတကတနဖြးနတက Minus Value နတ လအပရင သေတမတနပးလ ရပါတယ။ ဥပမာ - margin-top: -5px; ဒါနပမယ padding မာနတာ Minus Value နတ သေတမတနပးလ မရပါဘး။

CSS Box Model မာ မတသေားစရာထးပခားချကတစခရပါတယ။ အနပါမာနပးခတ နမနာက နနာကတစခါ ထပနဖြာပပနပးလက ပါတယ။

#content { width: 600px; height: 380px; border: 4px solid #519b7e; margin: 20px; padding: 10px;}

နမနာမာ Element အတက width: 600px; လ နကကပငာသေတမတနပးထားပါတယ။ ဒါနကကာင လကရ Document နပါမာ 600px အကျယရတ နနရာယလကပါလမမယ။ ဆကလကဂပး border: 4px solid #519b7e; လ သေတမတထားပါနသေး တယ။ Browser က Border အတကနနရာက width: 600px ထကနတမယပါဘး။ Document နပါမာ ထပတးယပါတယ။ အလားတပ margin: 20px; န padding: 10px; အတကလညး Document နပါမာပ တးချ နနရာယပါတယ။ ဒါနကကာင နမနာမာနပးထားတ Element ဟာ width: 600px; လ နပပာထားနပမယ အမနတစကယနနရာယမာကနတာ 668px ပဖြစပါ



တယ - 600 (width) + 8 (border left/right) + 40 (margin left/right) + 20 (padding left/right)။ အလားတပ height: 380px လ နပပာထားနပမယ အမနတစကယနနရာယမာက 448px ပဖြစပါတယ - 380 (height) + 8 (border left/right) + 40 (margin left/right) + 20 (padding left/right)။

ဒအချကဟာ Layout နတဖြနတးတအခါ ထညသေငးစဉးစားရမယအချကပဖြစပါတယ။ Element တစခရ နနရာယမ ဟာ width န height ဟာ နကကပငာထားတအတငး အတအကျရနနမာမဟတပါဘး။ border, margin, padding တ အတက တးချ ယရ တအတက အားလးက နပါငးစပတကချကမသော တစကယနနရာယထားတ ပမာဏက သေရမာပဖြစပါတယ။

ပ (၃-ဒ) Content Width vs. Actual Width

အခနဖြာပပခဂပးပဖြစတ Layout န Box Property နတကအသေးပပဂပး နနာကထပစမးသေပကကညစရာ နမနာတစခနရးနပးချငပါတယ။ Website နတမာနတ နနကက Drop Down Menu နလးတစခနလာကလပကကညချငပါတယ။

<!doctype html> <html> <head> <title>CSS Drop-Down Navigation</title> <style> .nav, .sub { font-family: Arial, Helvetica, sans-serif; list-style: none; margin: 0; padding: 0; } .nav li { background: #cb1212; height: 40px; line-height: 40px; text-align: center; width: 160px; } .nav li a { display: block; text-decoration: none;



color: #fff; } .nav li a:hover { background: #f00; } .nav > li { border-right: 1px solid #f00; float: left; } .sub { display: none; } .nav > li:hover .sub { display: block; } .sub li { border-top: 1px solid #f00; } </style> </head> <body> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li> <a href="#">Services »</a> <ul class="sub"> <li><a href="#">Social Media</a></li> <li><a href="#">Web Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Products</a></li> </ul> </body> </html>

နစသေကရာ File Name န ကးယစမးသေပဂပးနလလာကကညပါ။ ထးပခားချကတစချ ကရငးပပချငပါတယ။ HTML Structure က နလလာကကညပါ။ <ul> Element က Menu List အတကအသေးပပထားပါတယ။ <li> Element တစခအတငးမာနနာကထပ <ul> Element တစခက Sub-Menu အနနန ထညထားပါနသေးတယ။ Services နနာကက » ဆတာ HTML န Right Arrow Symbol ( » ) နလးတစခ ထညလကတာပါ။

CSS မာ .nav, .sub လ Select လပဂပး <ul> နစခလးအတက list-style: none န margin: 0; padding: 0; သေတမတထားပါတယ။ Bullet ပဖြတပပစဂပးနနရာလတအပယထား တာနတအကန ပဖြတပပစလကတာပါ။ <li> ဟာ Block Element ပဖြစပါတယ။ ဒါနကကာင နဘးချငးကပနဖြာပပနစချငတ <li> နတက .sub > li လ Select လပဂပး float: left; လသေတမတထားပါတယ။ ဒနနရာမာ Child Selector သေးရတာက Direct Child ပဖြစတ <li> နတကသော float လပချငဂပး နနာကတစဆငရနနတ <ul class="sub"> ထက <li> နတက မလပချငလ ပဖြစပါတယ။

နနာကတစခကနတာ .sub က display: none; လ နအာကနားမာ သေတမတလကပါတယ။ display Property နတ Inline/Block နပပာငးယမက လးဝနပဖြာကပပစဖြ none က Value အနနန နပးနငပါတယ။ display: none လ သေတမတထား တအတက Sub Menu ဟာ နပျာကနနမာပဖြစ ပါတယ။ နနာကတစဆင ကျနတာမ .nav > li:hover .sub မာ display: block; လ ပပနနပးထားပါတယ။ အဓပပါယက li က Mouse န နထာကလကနတာမသော သေ အတငးထက Sub Menu က ပပနနဖြာပပခငးလကတာပပဖြစပါတယ။ ဒနညးန JavaScript နတနတာငမလနတာပ Dorp-Down Menu တစခကရရသေားနစမာပပဖြစပါတယ။ ရလဒကဒလပစပဖြစမာ ပဖြစပါတယ။



ပ (၃-ဓ) CSS Drop-Down Menu

Menu တစခန တစခကကားလငးနလးနတထညဖြ Main Menu အတက border-left န Sub Menu အတက border-top တ သေတမတနပးထားတာကလညးသေတပပကကညပါ။

Position PropertiesElement နတနဖြာပပတအခါမာ အနပခခအားပဖြင အနပါကနနနအာက Document ထမာ ထညသေငးထားတ အစအစဉအတငးနဖြာပပ နလရပါတယ။ ဒါက Regular Flow လ နခါပါတယ။ Element နတက Regular Flow အတငးမဟတပနဖြာပပနစလတ နနရာအတ အကျသေတမတနပးချငရငလညး CSS န သေတမတနပးလ ရပါတယ။ position Property မာ absolute လ သေတမတဂပး နဖြာပပနစချငတ နနရာက top/bottom, right/left Property နတန သေတမတနပးရတာပဖြစပါတယ။

#box { position: absolute; top: 100px; left: 150px;}

ဒလသေတမတလကမယဆရင တစပခား Element နတ ဘယနနရာမာဘယလပရနနပါနစ၊ #box က Document Border ကနန top: 100px; left: 150px; အကာအနဝးမာပအတအကျနဖြာပပနပးမာပဖြစပါတယ။

HTML Element နတရ Default Position Value က static ပဖြစပါတယ။ position Property န အတ တနဖြာသေးနငတ နနာကထပ Value တစခကနတာ relative ပဖြစပါ တယ။ ပမနအားပဖြင position: absolute; သေတမတထားတ Element နတ နဖြာပပရမယ နနရာက Document Border ကနနသော တကချကနဖြာပပပါတယ။ လအပလ Document Border ကနနတကချကမနဖြာပပပ Parent Element ကနန တကချကနဖြာပပနစလရင Parent Element မာ position: relative; လ သေတမတနပးနငပါတယ။

[HTML]<div id="out"> <div id="in"> … </div></div>

[CSS]#out { position: relative;}#in { position: absolute; top: 100px; left: 100px;}

နဖြာပပထားတ နမနာမာ #in Element အတက top: 100px; left: 100px; အကာအနဝးက #out ရ Border ကနန



တကချကဂပးနဖြာပပနပးမာပဖြစပါတယ။

ပ (၃-န) Static vs. Relative Position

နနာကထပအသေးပပနငတ Position Value တစခကနတာ fixed ပဖြစပါတယ။ fixed န absolute က အနပခခအားပဖြငအတ တပါပ။ ကာပခားချကကနတာ absolute Position က Element က Document န Attach လပထားဂပး fixed Position က Screen View Point န Attach လပထားပခငး ပပဖြစပါတယ။ background-attachment န သေနဘာတရားတပါတယ။

ဒ position Property က Layout နတဖြနတးတနနရာမာနတာသေးကကနလမရပါဘး။ နနရာအနသေ သေတမတတာပဖြစလ Layout အတကဆရင သေပ Flexible မပဖြစတအတကနကကာငပဖြစပါတယ။ ဟနားဒနား လအပသေနလာကပ ထညသေငးအသေးပပကကပါတယ။ position တစကယအသေးဝငတာကနတာ JavaScript န တဖြကဂပး User Interface Element နတတညနဆာကတ နနရာမာ ပဖြစပါတယ (ဥပမာ - Popup Calendar, Modal Dialog, Tabbed Panel, etc...)။ နနာကအခနးမာ JavaScript နလလာတအခါ လကနတ အသေးပပကကရမာပဖြစပါတယ။ User Interface Element နတတညနဆာကတအခါ အသေးဝငန နနာကထပ Property နစခက ပဖြညစကနလလာထားသေငပါနသေးတယ။

z-index Property က Element နတ တစခန တစခထပဂပး Overlap ပဖြစတအခါ၊ ဘယ Element က အနပါကနဖြာပပရမလ သေတမတဖြ အတက အသေးပပရပါတယ။ တနဖြးပမငတသေကအနပါမာရမာပဖြစပါတယ။

#box-one { position: absolute; top: 100px; left: 100px; width: 400px; height: 280px; background: #ff0; z-index: 2;}#box-two { position: absolute; top: 150px; left: 150px; width: 400px; height: 280px; background: #8a5; z-index: 1;



opacity: 0.8;}

နမနာမာ #box-one က z-index: 2 ပဖြစဂပး #box-two က z-index: 1 ပဖြစတအတက တနဖြးပမငတ #box-one က အနပါကနဖြာပပမာပ ပဖြစပါတယ။

opacity Property က Element နတရ Transparency Level သေတမတဖြ အသေးပပနငပါတယ။ အပမငဆးတနဖြး 1 သေတမတ ထားရင ပမနအတငးနဖြာပပမာပဖြစဂပး၊ အနမဆးတနဖြး 0 သေတမတထားရငနတာ Element ကမပမငရနတာပ လးဝနပျာကကယနန မာပဖြစပါတယ။ 0 န 1 ကကား သေတမတလတ Transparency Level က ဒဿမကနးန သေတမတအသေးပပနငပါတယ။

Conclusionအခဆရင CSS န ပကသေကဂပး သေသေငတာအားလးနလလာခပါဂပ။ ဆကလကနလလာသေငတ CSS3, CSS Framework, Grid System န Responsive Web Design တ အနကကာငးက သေကဆငရာအခနးအလက ဆကလကနဖြာပပနပးသေားမာပပဖြစပါတယ။



[ မပငခငသေတပပရန ]

ဤစာတမးသေည “Professional Web Developer” အမညပဖြငထကရမည စာအပ၏ နမနာပဖြစဂပး

နရးသေားသေမလမပငခငပငရငမာ Fairway Web မ အနမာင ပဖြစပါသေည။ Creative Commons

Attribution-NonCommercial-ShareAlike 3.0 Unported လငစငပါ ကန သေတချကများနငအည

မညသေမဆ အခမရယပခငး၊ ကးယပဖြန နဝပခငးက မပငခငပငရငမ ခငပပဂပးပဖြစသေညဟ

မတယနငသေည။ ခခငးချကအပဖြစ ကန သေတထားသေညများမာ၊ ဤမရငး Soft Copy

အားလညနကာငး ပနပထတနဝ၍လညနကာငး အခနကကးနငပဖြင နရာငးချပခငးက ခငမပပပါ။

လအပသေလ ပပငဆငပဖြညစကခင ပပသေည။ သေ ရာတင ပပငဆငပဖြညစကထားသေည မခသေညလညး

ဤစာတမးအတက အသေးပပသေည လငစငကပင အသေးပပ၍ အခမဆကလကပဖြန နဝရမည။

လငစငချးနဖြာကမနကကာင အပငငးပားမ တစစတစရာ နပါနပါကပါက နအာကနဖြာပပပါ Website

လပစာတင အဂြဂလပဘာသောပဖြင နဖြာပပထားသေည အချကများသေညသော အတညပဖြစသေည။

http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode


professional web developer - untitled

Documents