Professional Web Developer - Ei Maung

Uploaded by Mg Thar byaw

http://mlmtechnological.blogspot.com

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 Application

အခနး (၁) Web StandardsW3C နင HyperText Transfer Protocol (HTTP)

အခနး (၂) HyperText Markup Language – HTMLWeb Document (သ ) Semantic Data Structure

အခနး (၃) Cascading Style Sheets – CSSUser Interface က အသကသငးခခငး

အခနး (၄) Javascriptနညးပညာတစခခတဆနးခစခသည Programming Language

အခနး (၅) Javascript Frameworks OverviewModern Web နင Rich Internet Application - RIA

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

အခနး (၇) Serverside Programing Languagesအသးအများဆး Server-side နညးပညာများ

အခနး (၈) Web Development with PHP (Part – 1)XAMPP – One-stop Development Environment

အခနး (၉) Web Development with PHP (Part – 2)PHP/MySQL – Database Driven Web Application

အခနး (၁၀) Web Development with PHP (Part – 3)PHP error handling နင မရမခဖြစ Apache module များ

အခနး (၁၁) Ajax with jQueryအဓကကျလာသည Client-Side Development ၏ အခနးကဏ





အခနး (၁၂) Content Management System – CMSGeneral Purpose CMS, Special Purpose CMS

အခနး (၁၃) MVC Web Application FrameworksD.R.Y – Don't Repeat Yourself

အခနး (၁၄) HTML5Application Platform ခဖြစလာသည HTML

အခနး (၁၅) Web Servicesအဆငခမငဝနခဆာငမများအား ခပါငးစပရယအသးချခခငး

အခနး (၁၆) REST and APIRepresentational State Transfer (သ ) Semantic Data Transfer

အခနး (၁၇) Mobile WebResponsive Web Design နင Mobile First Approach

အခနး (၁၈) Web Application SecuritySQL Injection, XSS နင အခခားလခခ ခရးဆငရာ သမတဖြယရာများ

အခနး (၁၉) Search Engine OptimizationSearch Engine များ၏ အခခခခအလပလပပ

အခနး (၂၀) Tools and UtilitiesBrowser Developer Tools, IDEs, Code Editors

ခနာကဆကတ (က)နညးပညာနင Open Source ၏ အခနးကဏ

ခနာကဆကတ (ခ)Web Hosting နင Cloud Computing

နဂးချပနညးပညာကအမလကနငဖြ ...





အခနး (၁) Web Standards

W3C နင HyperText Transfer Protocol (HTTP)

Internet

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

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

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

၁၉၆၀ ခပညနစမာ 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” လ ခခါခပါတယ။ Network ရ လပခဆာငချကခတက ခလျာချဂပး ကနပျတာက အဓကအလပလပခငးလကတ နညးစနစတစခလညး ခဖြစပါတယ။ ရလဒကတာ Network ခတအားလးက ချတဆကမယဆရငခတာင ချတဆက နငတ နညးပညာတစခ ခဖြစလာတာပါပ။

ARPA က လအပတ Software ခတကပါ တညခဆာကခဂပး ၁၉၇၇ ခနစမာကတာ မတကခပားတ နကဝပသးခက ခအာငခအာငခမငခမင ချတဆကနငခပါတယ။ ၁၉၈၁ ခနစမာ Protocol က လကစသတနငခဂပး ၁၉၈၂ ခနစမာကတာ “TCP/IP” လ ခခါတ အဒ Protocol က အခခားအဖြ အစညးခတကပါ စတငအသးခပလာကကပါတယ။ တစကမဘာလး အတငးအတာန ကနပျတာ Network ခတက ချတဆကခပးခတာမယ အငတာနကဆတာ အဒအချနမာ အစခပခတာ ခဖြစပါတယ။

ကခနအချနမာခတာ အငတာနကကနယက ကကးထမာ Network ခတ၊ ကနပျတာခတသာမက၊ မဘငးဖြနးခတ၊ Tablet န အခခားခသာ Device ခတလညး ပါဝငခနဂပခဖြစပါတယ။ အခခားခသာ Device ဆတ အထမာ အငတာနက ချတဆကမ ခပလပနငတ ကားခတ၊ မျကမန (Smart Glass) န နာရ (Smart Watch) ခတအခပင၊ ခနာကပငးမာ ဆရင အမသး ခရခခသတတ ာ၊ အဝတခလျာစကခတအထ အငတာနကကနယကမာ ပါဝငလာဖြ ရပါတယ။

အငတာနကကနယကမာပါဝငတ ကနပျတာန Device တငးမာ IP Address လ ခခါတ မမတ ကယပငလပစာ နပါတတစခစ ရကကပါတယ။ ဒလချတဆကထားတ Device ခတဟာ တစခန တစခ လအပသလ အချကအလက ခပးပ ဆကသယမခတ ခပလပနငမာခဖြစပါတယ။





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

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

World Wide Web (WWW)

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

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

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

၁၉၉၃ ခနစ ဧဂပလ ၁၃ ရကခနမာ WorldWideWeb နညးပညာရ Source Code က အများက ခဖြာခပခပါတယ။ ဒါခကကာင ဒနညးပညာက မညသမဆ (အခမ) အသးခပခငရလာပါတယ။ ဒါဟာလညး ကကးမားတ အလညအခခပာငး တစခက ခဖြစခပါခစခတ ဆးခဖြတချကပ ခဖြစပါတယ။





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

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

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

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

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

၂.) ခနာကတစခကခတာ Web Document ခတက သမးဆညးထားနငတ Web Server ခဖြစပါတယ။ Web Server ဟာ အခနးခတအများကကးပါတ ကနဒတကကကးတစလးန တပါတယ။ Web Document ခတကခတာ အဒတကကကးထမာ ရခနတ အခနးခတဆပါခတာ။

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





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

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

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

၃.) ခနာကဆးတစခကခတာ 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: vladstudio.com/wallpaper/?how_internet_works

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




http://www.vladstudio.com/wallpaper/?how_internet_works


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 နညးပညာမာ ဦးခဆာငခနတလပငနးခတက ပညာရငများလ ပးခပါငးပါဝင ခဆာငရကခန ကကတာ ခဖြစပါတယ။

Web Server န Web Browser ထပလပသခတက W3C နညးပညာစခတန ကကညတ Server ခတ Browser ခတ ထတလပကကသလ၊ ကျနခတာတ Web Developer ခတကလညး W3C နညးပညာစခတန ကကညတ Website ခတ Web Application ခတက ဖြနတးခရးသားရမာခဖြစပါတယ။

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 အခပင Web Document န အချကအလကခတက လကခရယ ခဖြာခပခပးနငတ အခခားနညးပညာများလညး ရပါခသးတယ။ ဥပမာ - 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 တ အကကား အခပန အလန နညးလညလကနာရမယ နညးပညာစက သတမတခပးထားခခငးပ ခဖြစပါတယ။ ပဂပးတတကျကျ ခခပာရရင HTTP က အငတာနကလမးမခပါမာ အချကအလကခတက ဘယလသယခဆာငရမယလ သတမတထားတ နညးလမးတစခပ ခဖြစပါတယ။

Client Request

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

GET /foo.html HTTP/1.1Host: example.comUser-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 ခတ ရပါတယ။ Client က အချကအလကက ရယလတရညရယချကခပါ မတညဂပး သငခတာတ Request Method က ထညသငးခပးပ ရမာ ခဖြစပါတယ။

အခခခခအားခဖြင အချကအလကခတ ရယလရင GET က သးရပါတယ။ အချကအလကအသစခတ Server ခပါမာ ဖြနတးခစလတာဆရငခတာ POST က သးရပါတယ။ Server ခပါကအချကအလကခတ ခပငဆငခစလရငခတာ PUT က သးရဂပး အချကအလကခတ ပယဖြျကခစချငရင DELETE က သးရပါတယ။ HEADER, DEBUG, TRACK, TRACE စတ အခခား Request Method ခတလညး ရပါခသးတယ။ ဒါခပမယ လခခ ခရးအားနညးခခငး၊ အသးခပရန လကခတ မလအပခခငးစတ အချကအချ ခကကာင အသးနညးပါတယ။ Request Method ခတအခကကာငး က အခနး (၈) Web Development with PHP (Part – 1) န အခနး (၁၆) REST and API တ မာ ဆကလကခဖြာခပမာ ခဖြစပါတယ။

Request Method ခနာကမာခတာ ရယလတ Document URL က ခပးရပါတယ။ သ ခနာကမာမ အသးခပလတ





HTTP Protocol version က ခဖြာခပခပးရတာခဖြစပါတယ။ ဒတယလငးကခတာ Server ရ လပစာခဖြစဂပး တတယလငးခဖြစတ User-Agent ကခတာ လကရခတာငးယသ Client အမျ းအစားက ထညသငးခဖြာခပခပးခခငးပ ခဖြစပါတယ။

ဒါအခပင စတတထ လငးမာ ခဖြညစကလကခနငတ နညးပညာအချ ကပါ Server က အသအခပးတအခနန ထညသငး ခပးထားတာက ခတ ရပါလမမယ။ ဒခဖြညစကနညးပညာခတအခကကာငးက အခနး (၁၀) Web Development with PHP (Part – 3) မာ ဆကလကခဖြာခပခပးပါမယ။ ခနာကဆးလငးကခတာ၊ အခခတာငးယတအချကအလက ဟာ ခဖြာခပထားတရကစ ခနာကပငး 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 Respond

Web Server က Hardware Server န Software Server အခဖြစ နစပငးခကကညဖြ လပါတယ။ Hardware Server ဟာ အခခခခအားခခင HTTP န တကရကသကဆငခခငး မရပါဘး။ 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 လပပက အခနး (၁၀) Web Development with PHP (Part – 3) မာ ခဖြာခပခပးပါမယ။

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

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

ပထမဆးလငးက အခခခအခနက 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 ခတ ခဖြစပါတယ။ Status Code ခတထက ခတ ရခလရတ Code အချ အခကကာငး ထညသငးခဖြာခပလကပါတယ။

200 OK – လကခရရတ Request အဆငခခပခကကာငးခဖြာခပဖြ သးပါတယ။

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

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

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

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

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

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 အမျ းအစား၊ ခပနလညခပးပ မယ အချကအလကရ Size န အမျးအစားတ ကပါ ထညသငးခဖြာခပခပးတာက ခတ ရမာခဖြစပါတယ။

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

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

Pull Technology

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





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

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

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

Stateless Protocol

Stateless 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 အတက ထပလပတ ဆကသယမ တ ကကားထမာ ဘယလ ဆကစပမ မျးမ မရတသခဘာ ခဖြစပါတယ။ Server က “ဪ.. ခစာခစာက A က ခတာငးထားတယ၊ အခ B က ခတာငးခပနဂပ၊ ခနာကတစခခါက C က ခတာငးရင အသငခပး နငခအာင ခပငထားမ” ဆတ လပခဆာငမ မျ း လပခပးခနမာ မဟတပါဘး။ A ခတာငးရင A ကခပးတယ၊ B ခတာငးရင B က ခပးတယ.. ခပရငးရငးပ အလပလပသားတာ ခဖြစပါတယ။

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





အခနး (၂) HyperText Markup Language - HTMLWeb Document (သ ) Semantic Data Structure

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

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

ပ (၂-က) မာ HTML Element တစခရ ဖြ စညးပက ခဖြာခပခပးထားပါတယ။ HTML Element ခတမာ အခခခခ အားခဖြင Open Tag န Close Tag ဆဂပး အဖြငအပတ ရပါတယ။ အဒ အဖြငအပတကကားထမာ Element 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 ကပ စတငတထငခတာ ခဖြစပါတယ။ အဒ (၁၈) ခထက (၁၁) ခဟာ ကခနထ ဆကလကပါဝငအသးခပခနဆ ခဖြစပါတယ။ အများ အသးခပ နငဂပခဖြစတ HTML 2.0 က စတငခကကခငာခတာကခတာ ၁၉၉၄ ခနစ နဝငဘာလမ ခဖြစပါတယ။ အဆငဆငခပငဆင မခတ ခပလပလာခဂပး အခဒစာခရးခနချနမာ ကျယကျယခပန ခပန အသးခပခနတာကခတာ ၁၉၉၉ ခနစ ဒဇငဘာမာ ခကကခငာခတ HTML 4.01 ပခဖြစပါတယ။ အနာဂါတမာ ခခပာငးလတးတက မခတ များစာပါဝငလာတ HTML5 က အသးခပကကမာ ခဖြစခပမယ၊ ဒအခနးမာ ပဂပးအခခခခကျတ HTML 4.01 က အရငကကည ချငပါတယ။ HTML5 အခကကာငးကခတာ အခနး (၁၄) HTML5 မာ ဆကလကခလလာသားမာ ခဖြစပါတယ။

Semantic Web

HTML Element ခတအခကကာငး မခလလာခင Semantic Web က အရငဆးနားလညထားဖြ လပါတယ။ Semantic ဆတာ သတမတထားတ စညးမျဉးကလကနာထားတအတက စနစကျခနတ Web Document ခတက ဆလတာခဖြစပါတယ။ Semantic ခဖြစခနမသာ 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 ရ အဖြ ခတစခခဖြစတ Spyglass Inc. က Mosaic Browser ရ လငစငက Microsoft က ခပးလကပါတယ။ ၁၉၉၅ ခနစ ဩဂတလမာ Mosaic Browser က အခခခခထားတ Microsoft Internet Explorer စတငခပါခပါကလာပါတယ။ ဒါခကကာင ခရ အခနးမာ Microsoft Internet Explorer န Mozilla Firefox တ ဟာ မလပထမ Browser ခဖြစတ Mosaic ကခန ဆငးသကလာ ကကတယလ ခခပာခတာခဖြစပါတယ။ Mosaic Source Code က အသးခပထားတာမဟတခပမယ Mosaic က တထငခသခတ ဖြနတးထားတ Netscape Navigator ဟာ၊ ခနာကပငးမာ အဓက Browser တစခခဖြစလာတ Firefox ရ အစလညးခဖြစပါတယ။ တစချနတညးမာပ ခနာခဝ ဆကသယခရးလပငနးတစခခဖြစတ Telenor ကလညး Opera Web Browser ရ ပထမဆး Version က စမးသပ ထတလပခပါတယ။ ဒါခကကာင Opera ဟာ ခရ အကျဆး Browser ခတထကတစခလ ဆနငဂပး ကခနထလညး Opera ရ သကခရာကမခတ Web Standards ထမာ ရခနဆခဖြစပါတယ။

အဒအချနကစဂပး အသးခပသခတန Web 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 ခလာကဟာ ဖြရဖြရခဖြစခနခရတာပ ခဖြစပါတယ။ ဒါခတအားလးဟာ သတမတစညးမျညးခတရခနခပမယ လကနာဖြ တာဝနရတသခတက လကနာဖြ ပျကကကတ အတကခကကာင ခဖြစခရတာလညး ခဖြစပါတယ။ Browser War က တစမျ း၊ အဒ Browser War ခကကာင မခဖြစခဖြစ ခအာင ဖြနတးခနရလ စနစမကျတ Web Document ခတကတစသယန ခကခတကာလခတပ ခဖြစပါတယ။

၁၉၉၈ ခနစမာခတာ Professional Web Developer ခတန ဖြ စညးထားတ Web Standard Project (WaSP) ဆတအဖြ အစညးတစရပ ခပါခပါကလာဂပး Web Standard ရ အခရးပါပက ခဖြာထပခခပာဆ ခရးသားလာခ ပါတယ။ အဓကရညရယချကကခတာ Microsoft န Netscape တ က သတ Browser ခတမာ 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 က အမျ းမျ းခခပာငးလ ရခကကာငး လကခတ ခပသခပါတယ။ Professional Web Developer ခတ အထးစတဝငစားဂပး ဒါဟာ Web Design ခလာကက တစခခတဆနးခစခတ ဖြနတးမလညး ခဖြစခပါတယ။

၂၀၀၄ ခနစက ခရာကလာတအခါ Web Standard က ခကာငးခကာငးလကနာထားတ Mozilla Firefox ရ ပထမဆး Version ထကလာခပါတယ။ အဒနစထမာပ Google က Gmail က စတငခကကခငာခပါတယ။ Gmail ဟာ Web Standard တစခခဖြစတ Javascript က အဓကအသးခပဂပး တညခဆာကထားတာ ခဖြစပါတယ။ အဆငခမင





Application ခတက Javascript န ဒလဒနညးအတငး တညခဆာကနငပါလား လ Web Developer ခတအတက စနမနာယစရာ Application တစခလညး ခဖြစလာခစခပါတယ။ ၂၀၀၄ ခနစ နစကနပငးခလာကမာခတာ O'Reilly Media က Tim-O'Reilly က Web2.0 စတစကားလးက စတငမတဆကခပါတယ။ အဒခနာကပငးကစဂပး Web2.0 ဆတ ခကကးခကကာသခအာကမာ Web Standard န တညခဆာကထားတ Application ခတ တစခဂပးတစခ ခပါခပါကလာခတာပ ခဖြစပါတယ။ Web Application ခတ စတငတစခခတဆနးခတ ကာလခတပ ခဖြစပါတယ။

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

HTML vs. XHTML

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

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

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

HTML 4.0 န 4.01 ကခရာကတအခါမာခတာ ခပနခပငလ မရနငခတာ ခလာကခအာင HTML ဟာ Semantic Data Structure ဆတ ရခဒါငကခန ခဝးကာလာဂပပ ခဖြစပါတယ။ Web Document ဆတာဟာ Application ခတရ





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

W3C အခနန အခခခအခနခတက ထမးညဖြ မခဖြစမခန လအပလာပါတယ။ ဒါခပမယ HTML 4 .01 မာ ထညသငး ထားဂပးသား Element ခတက ခနာက Version မာ ခပနခဖြတခပစလ လညး မရပါဘး။ လကရ HTML 4.01 က အသးခပခရးသားထားတ Website ခတအများကကး ရခနဂပခဖြစတအတက ခဖြတခပစလကရင လကရ Website ခတ အတက အဆငမခခပခတာပ Backward Compatibility က ထခကခစမာပ ခဖြစပါတယ။ ဒါခကကာင 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 အခကကာငး ခခပာစရာများစာရတအတက ဒခနရာမာ အကျယမချ ခတာပါဘး။ အခနး (၁၄) HTML5 ကျမသာ သးခခားထပမခဆးခနးမာ ခဖြစပါတယ။ အခခတာ ကျနခတာတ သဖြ လတ HTML Element တစချ က ဆကလကခလလာချငပါတယ။

HTML Skeleton

HTML 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 မာ ခဖြာခပခစလတ အချကအလက ခတ ထညသငးခရးသား ရမာပ ခဖြစပါတယ။ နမနာမာ အသးခပထားတ  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 က ပတညရတ ခနရာက ညနခပခပးဖြ အသးခပရပါတယ။ alt Attribute ကခတာ ပမခဖြာခပ နငတ အခခခအခနခတမာ ခဖြာခပခစလတ 'စာ' ထညသငခပးဖြ သးရပါတယ။ ပမခဖြာခပနငတ အခခခအခန ဆတာ src မာခပးထားတ ခနရာလမားခနတာပခဖြစခဖြစ၊ အငတာနကအဆကအသယ အခကအခခကကာင မခဖြာခပနငတာပခဖြစခဖြစ အခခခအခနတစရပရပခကကာင ပမခဖြာခပ နငတ အခခခအခနက ဆလတာပါ။ ခရးသားထားတ နမနာက 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 ခတက နစသကသလ ထညသငး ခရးသား နငပါတယ။

Hyperlinks and Anchors

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

အဒအခပင Document တစခရ အတငးထက ခနရာ (Region) တစခကခန အခခား ခနရာတစခကလညး ချတဆက နငပါခသးတယ။ ခပငပ Document တစခန ချတဆကထားတ Link က Hyperlink ခခါဂပး လကရ Document ထကပ ခနရာတစခက ချတဆကထားတ Link ကခတာ Anchor လ ခခါခလရပါတယ။ တနညးခခပာရမယဆရင Link ခတမာ ခပငပ (External) Resource တစခက ရညညနးချတဆကနငတ External Link န လကရ Document အတငးခနရာ (Internal) တစခက ရညညနးချတဆကနငတ 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>

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

Link တစခက နပလကတအခါ 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 ထ အတအကျ ညနးဆထညသငးခပးလကတာပ ခဖြစပါတယ။

Lists

HTML 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 Four5. Chapter Five


<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 အခဟာငးခတမာ အလပလပမာ မဟတပါဘး။

Tables

ဇယားခတထညသငးဖြ အတက <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 လ ခခါတ သခကဂတခတ HTML ထမာ ထညသငးလတအခါ အသးခပရတ ခရးသားနညး ခဖြစပါတယ Ampersand (&) န အစခပဂပး Semi-Colon (;) န အဆးသတခလရပါတယ။ © ကခတာ © Symbol ခလး ထညသငးချငတအခါ ခရးသားရတ HTML Entitle Symbol ခဖြစပါတယ။

Table Layout

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

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





ခဖြာခပထားတ Layout က Table တစခလ ခမငကကညပါ။ Row သးခရပါတယ။ အလယ Row မာ Column နစခရဂပး ကျန Row နစခမာ Column တစခစ ရကကပါတယ။ ဒနညးန <table> Element ခတက စာရငးဇယားခဖြာခပဖြ မဟတပ Page 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 Elements

Text ခတက Format လပလတအခါ အသးခပနငတ Element ခတရပါတယ။ အခခခခအားခဖြင <b> Element က စာလးခတ Bold လပဖြ အသးခပဂပး <i> Element က စာလးခစာငး (Italic) ခပလပဖြ အသးခပနငပါတယ။ ဒါခပမယ Text ခတက Format လပတယဆတာ အမနခတာ စာခတက ဘယလပစ ခဖြာခပရမလ သတမတခခငး ခဖြစပါတယ။ HTML Document ထမာ Text 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 ခဖြစပါတယ။<blockquote> - မတချကခတထညသငးဖြ (သ မဟတ) တစခခားသခဖြာခပထားတ အချကအလကခတ ကးကားခဖြာခပဖြ အတက အသးခပနငပါတယ။

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 က ပတထားနငပါတယ။ 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 Type မာ Text အခပင တစခခားအသးခပလ ရတာခတ ရပါခသးတယ။

<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 အလပလပပက အခနး (၈) Web Development with PHP (Part – 1) မာ အခသးစတ ထပရငးခပးမာ ခဖြစဂပး အဒအခနးမာပ တစခခား Input Element ခတက လကခတ အသးခပရမာ ခဖြစပါတယ။

မတချက ။ ။ 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 ၁၀ ခခန ပါတယ ဆကကပါစ ။ အားလးခဖြည ဂပးမ ခဖြညခသမျမာခနလ ၁၀ ခလးက ခပနရငးခပစချငတယဆတ Use Case က လကခတ မာ မရပါဘး။ မားလ ခပနခဖြညချငလ တစခ နစခပ ရမာပါ။ ဒ 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 နစမျ း ကျနပါခသးတယ။ 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 Example<!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 က Browser န ဖြငကကညရင အခလရလဒ ရရမာပခဖြစပါတယ။





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





Conclusion

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





အခနး (၃) Cascading Style Sheets (CSS)User Interface က အသကသငးခခငး

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

CSS Style Language က တထငဖြနတးဖြ ခဆးခနးကကခတာ Mailing List ထမာ အဆခပချက 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 လ အမညတငခစခတာ ခဖြစပါတယ။

မတချက ။ ။ Mailing List ဆတာ Online Forum ခတမခပါခငက အသးခပကကတ Email အခခခခပ ခဆးခနးမပစတစရပ ခဖြစပါတယ။ ကခနအချနထလညး တစချ Project ခတအတက အသးခပခနဆ ခဖြစပါတယ။

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

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





CSS Syntax

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

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

“<p> Element ခတထက class='note' လ သတမတထားတ Element ခတက စာလး Size 12 Pixels အသးခပခဖြာခပပါ။”

စသခဖြင ဘယ Element က ဘယလ Style န ခဖြာခပရမလဆတာက သတမတခကကခငာထားတ ခကကခငာချကများပ ခဖြစပါတယ။ ခရးသားပ Syntax က ပ (၃-က) မာ ကကညပါ။

ပ (၃-က) CSS ခရးသားပ Syntax

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 Selectors

CSS မာ နပါတ (၁) အခရးအကကးဆးက 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 Pattern မာ ထညသငးအသးခပနငတ 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 လပရတာ များစာ ထခရာကလယကသားမာပ ခဖြစပါတယ။

Pseudo-classes

Pseudo-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 နပလကတအခါ ခဖြာခပခစလတ 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;}

ဒလ ခရးသားခပးလကခခငးအားခဖြင <input type=”text”> Element ခတဟာ မလက ခနာကခ အခဖြခရာင န ခဖြာခပခနဂပး 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 မာ ခဖြာခပခပးမာပ ခဖြစပါတယ။





Background

Layout န ပကသကတ ကစစခတ မခလလာခင အခခခခကျတ 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 Addonwww.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 န သတမတလ ရမာမဟတ ပါဘး။ ဒါခကကာင Web Developer ခတက 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 Alert

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

Text and Font

စာလးအခရာင (Text Color) CSS န သတမတဖြ အတက color Property က သးရပါတယ။ Value အခနန ကခတာ Background Color မာ ခဖြာခပခတ နညးလမးခတအတငးပ ခပးရမာခဖြစပါတယ။ စာပဒ ခတက ဘယဘကကအညယမယ (သ မဟတ) ညာဘကက အညယမယ စသခဖြင 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 ခပါမာ Size အဂမတမးတညဖြ မခသချာပါဘး။ ဒါခကကာင အသးနညးပါတယ။ အသးများတ (၃) မျ းက 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 ခလးခတ န Marker အခဖြစ အသးခပခဖြာခပလရင အသခပနငပါတယ။

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 CSS

CSS 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 Order

Browser က 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 Types

HTML 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 လပလတအခါ အသးခပခလရတ နညးလမး တစခက တပါတညး ထညသငးခဖြာခပ လကတာ ခဖြစပါတယ။

Layouts

Web 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 နမနာအခပညအစက ကယတငစမးသပကကညနငဖြ အခပညအစ ခရးသားခဖြာခပလကပါတယ။

<!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 – Another method to clear floats

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

Box Model

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





ပ (၃-ထ) 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>

ခရးသားပအခသးစတကခတာ စာဖြတသကယတင ကးယစမးသပဂပး ခလလာကကညပါ။ ထးခခားချကတစချ ကခတာ ရငးခပချငပါတယ။ 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 Properties

Element ခတခဖြာခပတအခါမာ အခခခခအားခဖြင အခပါကခနခအာက 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 တ အခကကာငးက သကဆငရာအခနး အလက ဆကလက ခဖြာခပခပးသားမာပ ခဖြစပါတယ။

လကခတ စမးသပကကညနငဖြ န ခရးသားပနမနာ ရရခစဖြ ဒစာအပတအတ တဖြကပါလာတ CD ထမာ Design Template တစချ ထညသငးခပးထားပါတယ။ ခလလာကကညရ ဂပး တစချ က ကယတငလညး စမးသပဖြနတး ကကညဖြ အကကခပလပါတယ။





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

ဤစာတမးသည “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 - Ei Maung

Documents

Transcript of Professional Web Developer - Ei Maung