HTML Aေၾကာင္း သိေကာင္းစရာ

http://neepyinnyar.blogsome.com/
မွ ကူးယူျပဳစုသည္။
ျပဳစုသူ
ေမာင္ေစတနာ
zinmaungmg@gmail.com
www.mgsaytanar.co.cc
2
HTML ေလးေလ့လာရေAာင္ (Aပိုင္း-၁)
ငယ္ကတည္းက တစ္ခုခုကိုသင္တဲ့Aခါ စာခ်ည္းပဲ စကားခ်ည္းပဲေျပာၿပီးရွင္းျပ ရင္ မွတ္ကုိမမွတ္မိဘူး. ပုံတုိပတ္စ..
ေတာျခစ္.. ေတာင္ျခစ္..(ညစ္တီးညစ္ပတ္) နဲ႕ ဟုိပုံဆြဲဒီပုံဆြဲ ေက်ာက္သင္ပုန္းတစ္ခုလုံးျပည့္ေန ေAာင္သင္တဲ့
က်ဴရွင္ဆရာမ်ိဳးနဲ႕ပဲသင္ၿပီးမွ စာေမးပြဲေတြေAာင္ခဲ့ေတာ့ Cloud9တုိ႕ လူတတ္ႀကီ:လုပ္ဖုိ႕ Aရြယ္လည္းေရာက္ ေရာ
ေသာက္က်င့္ကပါေနေရာ.ဟီး. Aခုလည္း မေနႏုိင္လုိ႕ သူမ်ားကုိမ်က္စိ ေနာက္ေAာင္ဆရာ လုပ္လုိက္Uီး မယ္.
လာေလ့. HTML


Aရင္ဆုံး HTML
ဆုိတာဘာလည္းဆုိတာရွင္းလုိက္ၾကရေAာင္.. Aမွန္ေတာ့ HTML ဆုိတာက က်ေနာ္တုိ႕ေန႕စU္Aသုံးျပဳဖတ္႐ူေနတဲ့ Web
Page ေတြျဖစ္လာဖုိ႕ Aေနာက္ကေန Aဓိကေရးသားရတဲ့ Language တစ္ခုပါပဲ.. HTML ရဲ႕Aရွည္က ေတာ့ HyperText
Markup Language ပဲျဖစ္ပါတယ္.. HTML မွာAဓိက လုပ္ေဆာင္ေပးတဲ့ လုပ္ငန္း(၂) ခုရွိပါတယ္..
Aဲ့(၂)ခုကဘာလည္းဆုိေတာ့ Documents ေတြ Text ေတြကုိ Aျပန္Aလွန္ ခ်ိတ္ဆက္ေပးျခင္း (Interlinking) နဲ႕ World
Wide Web (WWW) ေပၚမွာ Documents ေတြ ..Contentေတြနဲ႕ Web Page ေတြကုိ AစီAစU္က်နေAာင္
လုိခ်င္တဲ့ပုံစံခ်ေပးျခင္း ( Formatting Documents ) ဆုိတဲ့လုပ္ငန္း (၂) ခုပဲျဖစ္ပါတယ္.. ဒါ့ေၾကာင့္ HTML ကုိ
(Hypertext); Documents ေတြကုိ Aျပန္Aလွန္ခ်ိတ္ဆက္ေပးတဲ့ Language တစ္ခုAေနနဲ႕ေရာ၊ (Markup) ; လုိခ်င္တဲ့
Web Page ပုံစံရေAာင္ Tags ေတြAသုံးျပဳၿပီး ပုံစံခ်လုိ႕ရတဲ့ Language Aေနနဲ႕ပါေပါင္းၿပီး HyperText + Markup
Language = HyperText Markup Language ( HTML ) လုိ႕ေခၚျခင္းပဲျဖစ္ပါတယ္.. ေနာက္Aေရးႀကီးတာ
တစ္ခုကေတာ့ HTML ဟာ Programming Language မဟုတ္ပါဘူး.. Markup Language (Code Language)
တစ္ခုပဲျဖစ္ပါတယ္.. Aဲ့ေနရာမွာ မရွင္းမွာစုိးလုိ႕ HyperText ဆုိတာဘာလည္း.. Markup ဆုိတာဘာလည္း..ဆုိတာကုိ
ေAာက္မွာ ထုံးစံAတုိင္း ပုံနဲ႕ရွင္းျပထား ပါတယ္.. (ပုံ-၁.၁) HyperText ျဖင့္ Document
ေတြကုိAျပန္Aလွန္ခ်ိတ္ဆက္ထားပုံ
HyperText ဆုိတာကေတာ့ ၀က္ဘ္ဆုိက္တစ္ခုကုိဖြင့္ၾကည့္မယ္ဆုိရင္ Mouse ရဲ႕ Arrow Key ေလး လက္ပုံစ ံ
ေျပာင္းသြားတဲ့ ေနရာတုိင္းဟာ HyperText လုိ႕A ၾကမ္းဖ်U္းေျပာလုိ႕ရပါတယ္.. နမူနာၾကည့္ခ်င္ရင္ ဒီေနရာ
ေပၚပြၽိဳင္တာတင္ၾကည့္.. A လုပ္လုပ္ပုံကေတာ့ လုိခ်င္တဲ့စာမ်က္ႏွာ၊ စာလုံး၊ ဓာတ္ပုံ၊ ဗြီဒီယုိ၊ ဖုိင္ေတြ. ျခဳံေျပာရရင္
3
Documents( Contents ) ေတြကုိ လုိသလုိခ်ိတ္ဆက္ေပးျခင္းပဲျဖစ္ပါတယ္.. A င္တာနက္ေပၚမွာဆုိရင္ Hypertext
ရဲ႕A လုပ္လုပ္ပုံကုိ နမူနာေကာင္းတစ္ခုA ေနနဲ႕ http://www.wikipedia.org ၀က္ဆုိက္ကုိၾကည့္မယ္ဆုိရပါတယ္..
သူ႕မွာဆုိ Hypertext ေတြနဲ႕ ခ်ိတ္ထားခ်ိတ္ထားတာ လုိက္ၾကည့္လုိ႕ကိုဆုံးမွာမဟုတ္သေလာက္ပါပဲ.
(ပုံ-၁.၂) Markup Language တြင္ HTML Tags မ်ားျဖင့္ ပုံစံခ်ပုံ
ေနာက္တစ္ခု Markup Language ဆုိတာဘာလည္းဆုိတာပဲ.. A ဲ့တာလည္းသိပ္ေတာ့မရႈပ္ပါဘူး.. ငယ္တုန္းက
ကေလးေတြA ိမ္ေဆာက္တဲ့ ပုံစံစုံ A စုံေရာင္စုံ A တုံးေလးေတြလုိပါပဲ.. HTML Tags ေတြက A ဲ့လုိေရာင္စုံ
A တုံးေလးေတြေပါ့.. လုိခ်င္တဲ့ပုံစံရေA ာင္ စီရင္စီရင္းနဲ႕ ေနာက္ဆုံး Webpage ဆုိတဲ့
A ိမ္ပုံေလးေပၚလာတာပေဲ လ..၀က္ဘ္ေပ့ခ်္ေတရြ ဲ ေနာက္မွာ HTML Tags ( Code)
ေတြနဲ႕တည္ေဆာက္ထားတယ္ဆုိတာကုိ ေA ာက္ကပုံ ကုိၾကည့္ရင္ သေဘာေပါက္မွာပါ..တကယ္ေတာ့ Internet Web
Broswers ေတြမွာ Web Page တစ္ခုကုိ ကုိယ္ေပၚခ်င္တဲ့ပုံစံနဲ႕ေပၚႏုိင္ဖုိ႕ ေနာက္က A မိန္႕ေပးခုိင္းေနတာ Markup Tags
ေတြပဲေပါ့..
(ပုံ-၁.၃) HTML Tags မ်ားျဖင့္ ၀က္ဘ္ဆုိက္တခုA ားေနရာခ်တဲ့နမူနာပုံ
HTML Webpage တစ္ခုရဲ႕ Typical A က်ဆုံး Skeleton Structure ကုိ (ပုံ-၁.၄) မွာၾကည့္ႏုိင္ပါတယ္..
A ေသးစိတ္႐ွင္းလင္းခ်က္ေတြကုိေတာ့ ေနာက္ ပုိ႕စ္ေတြမွာဆက္ဖတ္ပါUီး..
ဒီA ပုိင္းမွာေတာ့ HTML ကုိဘယ္သူ စထြင္
ခဲ့တာလည္းဆုိတာ ေျပာျပခ်င္ပါတယ္.. HTML ကုိစခဲ့သူလုိ႕လည္းေျပာေျပာ Father Of the Web လုိ႕လည္းေခၚေခၚ
A ားလုံးကသိၾကတာကေတာ့ သူ႕နာမည္က Sir Tim Berners-Lee ( ၁၉၅၅ ခုႏွစ္ဖြား) ပါ.. သူကကြန္ပ်ဴတာပ႐ုိဂရမ္မာ
မဟုတ္ပါဘူး.. ၿဗိတိန္လူမ်ိဳး ရူပေဗဒပညာရွင္ ျဖစ္ၿပီး လက္ရွိ World Wide Web Consortium (W3C) ရဲ႕
ဒါ႐ုိက္တာလည္းျဖစ္ပါ တယ္.. သူA ေၾကာင္း A ေသးစိတ္ကုိသိခ်င္ရင္ေတာ့ ဒါေလးဖတ္ၾကည့္ပါ..
4
(ပုံ-၂.၁) Sir Tim Berners-Lee
WWW ျဖစ္မလာခင္ hypertext နဲ႕ docuverse ဆုိတဲ့ A သုံးA ႏႈန္းနဲ႕ သီA ုိရီကုိ စU္းစားခဲ့တာကေတာ့ A ေမရိကန္လူမ်ိဳး
A ေတြးA ေခၚပညာရွင္ Ted Nelson ( ၁၉၃၇ ခုႏွစ္ဖြား) ပဲျဖစ္ပါတယ္.. တျခားတျခားသူေတြလည္း ရွိေသးတာေပါ့ ..
ဒီေလာက္ဆုိပဲေတာ္ေတာ္ေမ့ခ်င္ေနေလာက္ၿပီ.. ဒီကေလးႀကီး (၂) ေယာက္ေတာ့ေသခ်ာမွတ္ထားေနာ္.. ဟိ
(ပုံ-၂.၂) Ted Nelson
HTML ေလးေလ့လာရေA ာင္ (A ပိုင္း-၂)
ကဲA ပို္င္း (၂)ေလးစလိုက္ၾကရေA ာင္
မွတ္ခ်က္။ ။ ( ႏွင့္ေဖာ္ျပထားေသာcode မ်ားA ား < A ျဖစ္ေျပာင္းသံုးရပါမည္။
ဒီေနရာမွာ ႐ွင္းျပရရင္ နည္းနည္းရႈပ္သြားတတ္လုိ႕..
ေနာက္က ေျပာင္းျပန္လွန္ၿပီး A ရင္ရႈပ္ၿပီးမွပဲရွင္း ေA ာင္လုပ္ ေတာ့မယ္.. ဟီးဟီး.. နည္းနည္းေတာ့သည္းခံ.. A ဆင့္(၁)
A ေနနဲ႕ ေA ာက္ကပုံကုိၾကည့္ပါ
( ေA ာက္ကပုံဆုိတာ ပုံနံပါတ္ ၄.၁ ကုိေျပာတာေနာ္)
(ပုံ-၄.၁) ဘာေတြလည္း?? ဟ
ေခါင္း႐ႈပ္သြားၿပီလား..? A ရင္ပုိ႕စ္ေတြတုန္းကေျပာခဲ့တာ မွတ္မိ ေသးလားမသိဘူး HTML ဆုိတာ Markup Language
ဆုိတာေလ.. မွတ္မိမွာပါ.. တကယ္ဆုိရင္ HTML ရဲ႕ A ေဖA ရင္းႀကီးတစ္ေယာက္လုံးျဖစ္တဲ့ SGML ကုိခ်န္ထားခဲ့တာ
Cloud9 နဲ႕ မတည့္လုိ႕ေတာ့မဟုတ္ပါဘူး.. ဟီး.. A မွန္ SGML A ေၾကာင္းကုိ ဒီေနရာမွ တြဲၿပီးရွင္းျပခ်င္လုိ႕ပါ.. SGML
ဆုိတာ Standard Generalized Markup Language ရဲ႕ A တုိေကာက္စာလုံးပါ.. သူက A ရင္က် တဲ့ Markup Language
ျဖစ္ၿပီး ပုံမွာ နမူနာျပထားတဲ့A တုိင္း A မဲေရာင္ေနာက္ ခံေပၚက Tags ေတြဟာ SGML ပဲျဖစ္ပါတယ္.. A မ်ားသိၾကတဲ့
နာမည္ေက်ာ္ Oxford English Dictionary 2nd Edition (OED) ကုိ SGML Language A သုံးျပဳၿပီး ေရးထားတာပါ..
ပုံမွာၾကည့္ပါ..
A ဲ.. ေနာက္မွ HTML တုိ႕ XML တုိ႕ Docbook တုိ႕ဆုိတာ SGML ကုိA တုယူၿပီး Website ေတြေရးသားတဲ့၊
တျခားလုပ္ငန္းေတြမွာသုံးတဲ့ Markup Languages ေတြA ေနနဲ႕ ဆန္းသစ္ထားတာပါ.. A ုိေက.. XML, SGML
ေတြခဏထား.. HTML ကုိ ဘယ္ေနရာမွသုံးလည္းဆုိတာပဲဆက္႐ွင္းရေA ာင္..
5
A ၾကမ္းဖ်U္းေျပာရရင္ေတာ့ HTML ကုိ၀က္ဘ့္ဆုိက္ေတြ ေရးသားတဲ့ေနရာမွာ A ေျခခံA က်ဆုံး Language တစ္ခုA ေနနဲ႕
A သုံးျပဳပါတယ္.. ၀က္ဘ္ဆုိက္ ေရးသားျခင္း ( Creating Website ) ဆုိတဲ့ေနရာမွာလည္း မသိမျဖစ္သိထားရ မွာက
Static နဲ႕ Dynamic ဆုိတဲ့ စကား(၂)လုံးပါပဲ.. ဘာလည္းဟ.. Static နဲ႕ Dynamic.. ဟဟဲ ဲ.. မေၾကာက္ပါန႕ဲ .. Dynamic
ဆုိတာ ဒုိင္းနမုိက္မဟုတ္ပါဘူး..
A ဓိကA ားျဖစ္ေတာ့ ၀က္ဆုိက္ေတြကုိ A ုပ္စုခြဲမယ္ဆုိရင္ Static Website A ုပ္စုနဲ႕ Dynamic Website
A ုပ္စုကုိA ဓိကေတြ႕ရမွာပဲျဖစ္တယ္.. ႐ွင္းေA ာင္ထပ္႐ႈပ္ရရင္.. Static Website ဆုိတာ A သည္းႏွလုံးမ႐ွိတဲ့
ေကာင္မေလးလုိပါပဲ.. ဘာေမးေမး.. ဘာေျပာေျပာ..ဘာမွ Response ျပန္မလာ ဘူး.. ဘာ..ေဖဗာ(Favour)..
မွလည္းမေပး A ထာေလးေတာင္မျပ ( ဆုိလုိတာ Search Engine လုိဟာမ်ိဳး၊ Cbox လုိမ်ိဳးေလးေတာင္မရွိတာကုိ
ဆုိလုိတာ )….ေတာ္ ေတာ္စိတ္ပိန္ဖုိ႕ ေကာင္းတဲ့၀က္ဘ္ဆုိက္မ်ိဳးေပါ့.. နမူနာၾကည့္ခ်င္ရင္ ဒီနားကုိႏွိပ္.. A ဲ့မွာေတြ႕မွာပါ..
ၾကည့္တဲ့ ယူဇာA တြက္ information ေပးယုံသက္သက္ပဲ.. ၀က္ဆုိက္ေရးတဲ့သူေရးထားတာထက္ ဘာမွပုိဖတ္လုိ႕
လည္းမရ..ဘာမွလည္း Input လုပ္စရာမ႐ွိဘူးေလ.. ဘာျဖစ္လုိ႕လည္းဆုိေတာ့ ခံစားတတ္တဲ့ A သည္း ႏွလုံးနဲ႕တူတဲ့
Dynamic Web Programming Language မ်ိဳးျဖစ္တဲ့ .. ASP, PHP, CGI Language မ်ိဳးကုိမသုံးဘဲ HTML လုိ Markup
Language သက္သက္ပဲသုံးထားလို႕ေပါ့.. ပုံမွာ မွင္A ျပာန႕ဲ ကြပ္ထားတ့ဟဲ ာကိုၾကည့္ရင္ နမူနာ HTML Code
ေတြကုိေတြ႕ရမွာပါ..
A ဲ့တာနဲ႕ေျပာင္းျပန္ တဘက္က Dynamic ကေတာ့ တမ်ိဳး.. နည္းနည္းေလးမစလုိက္နဲ႕ မ်ားမ်ားျပန္ေျပာတာ..
နမူနာျပရရင္ .. ေန႕စU္ျမင္ေန ၾက Google Search Engine ပဲၾကည့္.. စာလုံးေပါင္းမွားရုိက္လုိက္ရင္ ေတာင္.. Did you
mean..?? ဘာညာနဲ႕ ဒါေလးကုိဆုိလုိတာမဟုတ္လား.. ဟုိဟာေလး မဟုတ္ဘူးလားနဲ႕.. လာေသးတာ.. A ခု ပဒုမၼာ
၀က္ဆိုက္ကိုပဲၾကည့္ပါUီး.. သူနဲ႕ ေတ႕ြ ရဖို႕.. ရီဂ်စ္စတာလုပ္ရ.. ဟိုဟာျဖည့ရ္ .. ဒီဟာျဖည့္ရ.. Sign In လုပ္လို႕
တုိက္ပင္ေလးမ်ားမွားျပန္ေတာ့လည္း.. ဒီမွာ..ေမာင္ရင္.. ေမာင္ရင့္ ပတ္စ့္ေ၀ါ့မွား ေနတယ္ထင္တယ္..ေလး..ဘာေလး..နဲ႕
မွင္နီနဲ႕က တားျပေသး တယ္.. A ဲ့လုိA ဲ့လုိ.. A ခုမ်ား တုိးတက္လာလုိက္တဲ့ Dynamic Web Site ေတြ..
စိတ္ကူးထဲေပၚသမွ် ၀က္ဘ္ဆုိက္ေပၚတင္ ေတာ္ေတာ္မ်ားမ်ားလုပ္လုိ႕ရ ေနေတာ့တာပဲ.. ဒါဘာေၾကာင့္လည္းဆုိေတာ့ PHP
တိ႕ု လို.. ေနာက္ Microsoft ရဲ႕ ASP, ASPX, .Net စတဲ့ Web Programming Language ေတြရဲ႕A စမြ ္း ေတေြ ၾကာင့္ ပါပဲ..
ကဲကဲ.. ေဖာေ႐ွာေတြA လုပ္ေကာင္းေနတာနဲ႕.. Dynamic Web Site မွာ HTML ကုိဘယ္လုိသုံးလည္းဆုိတာ
ေျပာဖုိ႕ေမ့ေတာ့မလုိ႕.. ဘယ္လုိပဲ Web Programming ေတြ တုိးတက္တာတုိးတက္လာ.. HTML ကေတာ့
ေျပာက္ပ်ယ္မသြားေသးပါဘူး.. ဘာလုိ႕လည္းဆုိေတာ့ .htm, .html extension ႐ွိတဲ့ Webpage ေတြကုိ Server Type
မ်ိဳးစုံ Web Browser မ်ိဳးစံုက Support လုပ္ေပး၊ A လုပ္လုပ္ေပးႏုိင္လုိ႕ပါပဲ.. ေနာက္ၿပီး HTML ကုိA သုံးျပဳၿပီးေရးထား တဲ့
Web Page ေတြကလည္း Billion နဲ႕ခ်ီၿပီး A င္တာနက္ေပၚ႐ွိေသးေတာ့.. သူ႕ကုိ ပစ္ပယ္လုိ႕မရပါဘူး.. A ဲ့ေတာ့
ဘာလုပ္လည္းဆုိေတာ့ Backword Compatibility ( A ေဟာင္းေတြနဲ႕လည္းA ဆင္ေျပဖုိ႕) A သစ္A သစ္Version
ေတြ႕ျမွင့္တယ္.. Dynamic Programming Code ေတြကုိ HTML Code ေတြၾကား မွာ Embadded ( ျမဳတ္ၿပီး ) ေရးတယ္..
နမူနာA ေနနဲ႕ ပုံ.၄.၁ က ညာဘက္A စြန္က Box မွာ A စိမ္းနဲ႕၀ုိင္းျပထားတာကုိေတြ႕မွာပါ.. A ခုဆုိရင္ Standard ျဖစ္တဲ့
HTML Version ေတြကေတာ့ HTML v.4.01 နဲ႕ HTML v.3.2 ေတြပဲျဖစ္ၿပီး.. ေနာက္ဆုံး XHTML ( Extensible
HyperText Markup Language ) ထိေျပာင္းလဲတုိးတက္ေနပါၿပီ..
ဒီေန႕ေတာ့ က်ေနာ္တုိ႕တကယ္
လက္ေတြလုပ္ရမယ့္A ပုိင္းေရာက္ပါၿပီ။ A ုိေက.. တကယ္တမ္း HTML ကုိ ေရးၾကမယ္ဆုိ သူ႕ကုိ ဘယ္ Application
ကုိA သုံးျပၿပီေရး မွာလည္း..? ဒီေမးခြန္းတစ္ခု A တြက္A ေျဖကေတာ့ ေရးမယ့္ User ရဲ႕ Operating System
A ေပၚမွာမူတည္ၿပီး HTML Editor ေတြကြဲျပားပါလိမ္မယ့္.. HTML ေရးတဲ့ HTML Editor Software ေတြကလည္း
A င္တာနက္ေပၚမွာ ပြစိလန္လုိ႕ေပါ့.. ဒါေပမယ့္ ဘယ္လုိပဲဘယ္လုိကြဲကြဲ.. A ေျခခံA ားၿပီး Text Editor နဲ႕ WYSIWYG
(What You See Is What You Get ) Editor ဆုိၿပီး A ဓိက A ုပ္စု (၂)ခုခြဲလုိ႕ရပါတယ္..
6
Text Editor ဆုိတာက ေတာ့ ျမင္သာေA ာင္ေျပာရရင္ က်ေနာ္တုိ႕ Microsoft Windows ေတြမွာ install လုပ္ကတည္းက
ပါလာတဲ့ Notepad ပါပဲ.. ပန္းသီးကြန္ပ်ဴတာ Mac ေတြမွာဆုိ BBEdit .. UNIX/Linux ေတြမွာဆုိ vi editor .. ဒါေတြက
Text Editor ေတြေပါ့..
WYSIWYG ေတြကေရာ ဘယ္လုိဟာေတြလည္းေမးရင္.. A နီးစပ္ဆုံး ျမင္သာမယ့္Uပမာ ျပရမယ့္ WYSIWYG Editor (
၀ွစ္စီ၀ွစ္ လုိ႕A သံထြက္ပါ တယ္) ကေတာ့ Microsoft Frontpage ပဲျဖစ္ပါတယ္.. Operating System မ်ိဳးစုံေပၚမွာသုံးတဲ့
တျခားတျခား WYSIWYG Editor ေတြကေတာ့ ..A မ်ားႀကီးပါပဲ.. ကုိယ္ေရးခ်င္. ထည့္ခ်င္.. ျပင္ခ်င္.. လုပ္ခ်င္တာေတြကုိ
Code View သက္သက္ မဟုတ္ပဲ Visual View နဲ႕ၾကည့္ၿပီး A လြယ္တကူ လုပ္လုိ႕ရတဲ့ Editor တုိင္းကုိ WYSIWYG
Editor လုိ႕ေခၚလုိ႕ရပါတယ္.. A ခုကၽြန္ေတာ္တုိ႕ ပဒုမၼာမွာ ပုိ႕စ္လုပ္ရင္ေရးတဲ့ Editor ကလည္း WYSIWYG ပါပဲ..
နမူနာA ေနနဲ႕ (ပုံ-၅.၁) မွာ Notepad နဲ႕ Frontpage ကုိႏိႈင္းယွU္ျပထား ပါတယ္..
(ပုံ-၅.၁) Notepad ႏွင့္ Frontpage 2003 ကုိႏႈိင္းယွU္ျပထားပုံ
ပုံမွာ ဘယ္ဘက္A ျခမ္းက Notepad ျဖစ္ၿပီး A ျပာေရာင္ Box နဲ႕၀ုိင္းျပထားတဲ့ Code View နဲ႕ပဲ ၀က္ဘ္ေပ့ခ်္
တစ္ခုကိုေရးလုိ႕ရပါတယ္.. ညာဘက္A ျခမ္း Frontpage 2003 မွာကေတာ့ A ေပၚျခမ္းမွာ A ျပာေရာင္နဲ႕၀ုိင္းျပထားတဲ့
Code view A ျပင္ ေA ာက္ဘက္မွာ A နီေရာင္ Box နဲ႕ ၀ုိင္းျပထားတဲ့ Visual view နဲ႕ ပါ တခါတည္း
စိတ္ႀကိဳက္ေရးလုိ႕ရတာကုိေတြ႕မွာပါ.. Microsoft Word
ကုိသုံးရသလုိA ရမ္းA ရမ္းကုိလြယ္တာပါပဲ..ခင္ည..တကယ္ကၽြမ္းက်င္သြားရင္ ၀က္ဘ္ဆုိက္ တစ္ခုကုိ
နာရီပုိင္းA တြင္းေရးသြားလုိ႕ရပါတယ္..
ဒီေလာက္ဆုိ ရင္ေတာ့ Text Editor နဲ႕ WYSIWYG Editor ႏွစ္ခု ဘယ္လုိကြဲလြဲလည္းဆုိတာ
သေဘာက္ေပါက္မယ္ထင္ပါတယ္.. ဒီပဒုမၼာပုိ႕စ္ ေတြမွာေတာ့ Text Editor ကုိပဲA သုံးျပဳၿပီး႐ွင္းျပသြားပါမယ္.. Frontpage
A ေၾကာင္းကုိေတာ့သိခ်င္ရင္သီးသန္႕ပုိ႕စ္ေရးၿပီး ေမးႏုိင္ပါတယ္.. က်ေနာ္သိသ ေလာက္႐ွင္းျပေပးပါမယ္..
ကဲA ခုေတာ့ ပထမဆုံး Lesson တစ္ခုကုိစလုပ္ဖုိ႕ Start>All Programs>Accessories>Notepad ကုိဖြင့္ပါ..
A ုိေက ပြင့္လာၿပီဆုိရင္ Notepad ထဲမွာ (ပုံ-၅.၂) မွာေရးထာတဲ့ code ကုိကူးေရးလုိက္ပါ.. < > / ေတြကုိ
ေသခ်ာမက်န္ခဲ့မိေစဖုိ႕ေတာ့လုိပါတယ္.. စာလုံးေပါင္းလည္းမမွားေစနဲ႕Uီးေနာ္..
(ပုံ-၅.၂)
A ဲ့တာေတြA ကုန္ေရးၿပီးသြားရင္ေတာ့ .html (သုိ႕) .htm extension A ေနနဲ႕ သိမ္းဖုိ႕လုိပါၿပီ.. ဒီေနရာမွာ
ေမးခြန္းတစ္ခုျဖစ္လာႏုိင္တာက .html နဲ႕ .htm က ဘာကာြ လည္းဆိုတာပါပဲ.. A ၾကမ္းဖ်U္းျပန္ေျဖရမယ္ဆိုရင္ေတာ့
7
ဘာမွမကြာဘူး လုိ႕ပဲေျပာရမွာပါပဲ.. A ေသးစိတ္ျပန္ေျဖရမယ္ဆုိရင္ေတာ့ လက္႐ွိ ကြန္ပ်ဴတာ ေလာကမွာ File Extension
ေတြကုိ A ကၡရာနဲ႕ဂဏန္း (၃) လုံးပဲေပးတာ Standard တစ္ခုလုိျဖစ္ေနပါၿပီ.. Uမာ.. .exe , .jpg, .bmp, .mp3 ..etc
A စ႐ွိ သျဖင့္ေပါ့.. .html ဆုိတာကေတာ့ A ရင္ကေပးခဲ့တဲ့ Extension တစ္ခုျဖစ္လုိ႕ (၄)လုံးျဖစ္ေနတာပါ.. ေနာက္ေတာ့
.htm ဆုိၿပီးေျပာင္းသုံးလာၾကပါတယ္.. A လုပ္လုပ္တာခ်င္းေတာ့A တူတူပါပဲ.. ေနာက္မွာဒီA ေၾကာင္းကုိ ပုိ႕စ္လုပ္ေပးပါ
မယ္.. A ခုေလာေလာဆယ္ေရးၿပီးသား HTML Code ကုိ Webpage A ေနနဲ႕ သိမ္းဖုိ႕A ရင္လုပ္ရပါမယ္…
A ဲ့လုိ Extension နဲ႕သိမ္းႏုိင္ဖုိ႕ ကြန္ပ်ဴတာမွာ ေA ာက္ပါ Setting ေလးေတာ့ ျပင္ေပးဖုိ႕လုိပါတယ္.. ျပင္ရမယ့္ ပုံကုိေတာ့
ေA ာက္က (ပုံ-၅.၃) နဲ႕ (ပုံ-၅.၄) မွာျပထားေပးပါတယ္.. A ဲ့A တုိင္းေလး Extensions for known file types check box
ကုိ A မွန္ျခစ္ေလးျဖဳတ္ေပးပါ..
(ပုံ-၅.၃)
(ပုံ-၅.၄)
A ဲ့လုိျဖဳတ္ၿပီးသြားရင္ ေစာေစာက ေရးထားတဲ့ Notepad File ကုိ Save as နဲ႕ ေA ာက္ပါA တုိင္း Desktop ေပၚမွာ www
Folder A သစ္တစ္ခုေဆာက္ၿပီး index.htm A မည္နဲ႕သိမ္းပါမယ္.. (ပုံ-၅.၅) (ပုံ-၅.၆) ကုိၾကည့္ပါ..
8
(ပုံ-၅.၅)
(ပုံ-၅.၆)
A ဲ့လုိသိမ္းၿပီးတဲ့ေနာက္ www ဖုိလ္ဒါထဲ ကေစာေစာက သိမ္းခဲ့တဲ့ inde.htm ဖုိင္ကုိ Internet Explorer
ကုိA သုံးျပဳၿပီးဖြင့္ၾကည့္မယ္ဆုိရင္ (ပုံ-၅.၇) မွာျပထားတဲ့A တုိင္းပထမဆုံး ၀က္ဘ္ေပ့ခ်္တစ္ခုကုိ ေတြ႕ရမွာ ျဖစ္ပါတယ္..
(ပုံ-၅.၇)
A ထက္ပုံမွာျပထားတဲ့A တုိင္းစာသားေတြမေပၚဘူးဆုိရင္ေတာ့ ေစာေစာ တုန္းက ကူးေရးတဲ့ေနရာမွာ
စာလုံးေပါင္းမွားတာေတြ A ဖြင့္A ပိတ္ ကြင္းေတြ ေသခ်ာမေရးခဲ့လုိ႕ပဲျဖစ္ပါတယ္.. ေနာက္တစ္ေခါက္ ျပန္စစ္ေဆးၿပီး
မွန္တဲ့A ထိႀကိဳးစားၾကည့္ပါ.. ရသြားၿပီးဆုိရင္ေတာ့.. မိမိA တြက္ ပထမဆုံး HTML Webpage တစ္ခုကုိ Create
လုပ္ႏုိင္ၿပီလုိ႕ဆုိႏုိင္ပါတယ္.. Congratulation! ပါ.. ဟီးဟီး
9
ကဲေနာက္တစ္ခုက ဒီသင္ခန္းစာမွာ မသိမျဖစ္သိထားမယ့္ A ခ်က္ တစ္ခုကုိ ဒီေနရာမွာ ႐ွင္းျပခ်င္ပါတယ္..
ဒါကဘာလည္းဆုိေတာ့ HTML Tag တစ္ခုရဲ႕ Typical Formation ပဲျဖစ္ပါတယ္.. HTML Tag ကုိ တကယ္သုံး ေတာ့
Element လုိ႕ေခၚၾကတယ္.. ဘယ္လုိပဲေခၚေခၚ A မဲ နဲ႕ A နက္ ဘာမွ မကြာသလုိပါပဲ.. HTML Tag (သုိ႕) Element
တစ္ခုရဲ႕ Typical Formation ကေတာ့ ေA ာက္က (ပုံ-၅.၃) မွာၾကည့္ႏုိင္ပါတယ္..
(ပုံ-၅.၃) HTML Tag တစ္ခု၏ Typical Formation
A ေသးစိတ္ကုိ႐ွင္းျပရမယ္ဆုိရင္ေတာ့..
(h2)(/h2) ဟာ HTML Element တစ္ခုျဖစ္ပါတယ္.. Heading Style 2 ကုိေျပာျခင္းျဖစ္ပါတယ္..ဒီေနရာမွာ (h2) ဟာ
Start tag ျဖစ္ၿပီး (/h2) ဟာ End tag ျဖစ္ပါတယ္.. A ဲ့(၂)ခုတစ္စုံကုိ Element လုိ႕ေခၚပါမယ္..
(h2 style="background=color:#ff0000;") ကေတာ့ Heading Style2 နဲ႕ေရးမယ့္ Content ကုိ Background Color
A နီထည့္မယ္ လုိ႕ေျပာတဲ့ Attribute ျဖစ္ပါတယ္.. style ကေတာ့ Attribute ျဖစ္ၿပီး "background=color:#ff0000;"
ကေတာ့ Attribute ရဲ႕ Value ပဲျဖစ္ပါတယ္.. Content ကေတာ့ ကုိယ္ ေရးခ်င္တဲ့စာသားပဲျဖစ္ပါတယ္.
Comments »
The URI to TrackBack this entry is: http://neepyinnyar.blogsome.com/2008/02/21/p11/trackback/
No comments yet.
RSS feed for co
HTML ေလးေလ့လာရေA ာင္ (A ပိုင္း-၃)
Element ဘယ္ႏွမ်ိဳး႐ွိသလည္း ?
ဒီA ခ်က္ကလည္း မသိလုိ႕မျဖစ္ပါဘူး.. A ဓိကA ားျဖင့္ Container Elements နဲ႕ Empty Elements ဆုိၿပီး ( ၂ )
မ်ိဳး႐ွိပါတယ္.. ေA ာက္က (ပုံ-၅.၄) ကုိၾကည့္ပါ..
[left]
[/left][center](ပုံ-၅.၄)
10
Container Elements ဆုိတာကေတာ့ Start Tag နဲ႕ End Tag ႐ွိတဲ့ Elements တုိင္းကုိဆုိလုိတာျဖစ္ၿပီး.. Start Tag နဲ႕
End Tag A စုံလုိက္မ႐ွိပဲ.. တစ္ခု တည္းသီးသန္႕ရပ္တည္တဲ့ Element တုိင္းကုိ Empty Elements (Standalone
Element) လုိ႕ေခၚပါတယ္..
Elements ေတြမွာလည္း Style A ရ (၂) မ်ိဳးထပ္ကြဲပါတယ္.. (ပုံ-၅.၅) ကုိၾကည့္ပါ..
(ပုံ-၅.၅)
<h1>,<p>,<li> A စ႐ွိတဲ့ Element ေတြက Block Style ႐ွိၿပီး.. <i>,<b> A စ႐ွိတဲ့ Elements ေတြက Inline Style
႐ွိပါတယ္.. Inline Elements တုိင္းဟာ Block Elements ေတြရဲ႕ A တြင္းမွာပဲA ျမဲထည့္ေရးေလ့႐ွိပါတယ္..
ေနာက္ၿပီးေတာ့.. Elements တုိင္းဟာ တစ္ခုနဲ႕တစ္ခု Nested ျဖစ္ေနဖုိ႕ လုိပါတယ္.. Overlapping ျဖစ္ေနမယ္ဆုိ
Webpage မွာမွန္မွန္ ကန္ကန္ေပၚလာမွာမဟုတ္ပါဘူး.. (ပုံ-၅.၆) ကုိၾကည့္ပါ..
(ပုံ-၅.၆)
A ေျခခံသိထားရမယ့္ A ခ်က္ေတြ၊ သုံးရမယ့္ Application နဲ႕ Setting ေတြကုိနားလည္ၿပီဆုိရင္ ဒီေန႕ေတာ့ က်ေနာ္တုိ႕
စၿပီး A လုပ္လုပ္လုိက္ၾကရ ေA ာင္.. A ရင္ပုိ႕စ္မွာ လုပ္ခဲ့တဲ့ First Page ကေတာ့ HTML သင္ခန္းစာရဲ႕ A ျမည္းလုိ႕ပဲ
သေဘာထားလုိက္ေပါ့..
<html></html> ဆုိတာကေတာ့ ထိပ္ဆုံးA က်ဆုံး.. A ျပင္ဘက္ A က်ဆုံး Element တစ္ခုျဖစ္ၿပီး .html (သုိ႕) .htm
extension ႐ွိတဲ့ Webpage တုိင္းမွာ မပါမျဖစ္ပါ၀င္ရမယ့္ Essential Element ျဖစ္ၿပီး က်န္တဲ့ HTML Element လုံးဟာ
သူ႕ရဲ႕A တြင္းမွာ ႐ွိရမွာျဖစ္ပါတယ္.. Browser က <html>… </html> Element ကုိ Codes ေတြA တြင္း
A ဖြင့္နဲ႕A ပိတ္မွာ ေတြ႕တာန႕ဲ ဒီ Document ဟာ HTML ဖိုင္A ျဖစ္သတ္မွတ္ၿပီး A တငြ ္းက Elements ေတကြ ို Browser
ေပၚမွာ ဘာသာျပန္ေပးေတာ့တာပါပဲ.. Uပမာ..
11
<head></head> ဆုိတာကေတာ့ HTML ဖုိင္တစ္ခုရဲ႕ေခါင္းစီးပုိင္း ျဖစ္ၿပီး.. Page နဲ႕ဆုိင္တဲ့ Information ေတြကုိ ဒီ
Element A တြင္းေရးရပါ တယ္.. Uပမာ..
<body></body> ဆုိတာကေတာ့ HTML ဖုိင္တစ္ခုရဲ႕ ကုိယ္ထည္ ပုိင္းျဖစ္ၿပီး Page ေပၚမွာျပခ်င္တဲ့
A ရာေတာ္ေတာ္မ်ားမ်ားကုိ ဒီ Element A တြင္းေရးပါတယ္.. Uပမာ..
<title></title> ဆုိတာကေတာ့ HTML ဖုိင္တစ္ခုမွာ မတပ္မျဖစ္ တပ္ရမယ့္ ေခါင္းစီးေပၚဖုိ႕A တြက္A လုပ္လုပ္ေပးတဲ့
Element ပဲျဖစ္ပါတယ္.. Uပမာ..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၇) A တုိင္းျမင္ရပါမယ္..
12
(ပုံ-၅.၇)
<h1></h1> ဆုိတာကေတာ့ Level 1 Heading ပဲျဖစ္ပါတယ္.. ေခါင္းစU္ေတြတပ္ခ်င္တဲ့A ခါမွာသုံးပါတယ္.. Level 1 to
6 ႐ွိပါတယ္..Uပမာ..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၈) A တုိင္းျမင္ရပါမယ္..
13
(ပုံ-၅.၈)
<br> ဆုိတာကေတာ့ Break Line ျဖစ္ၿပီး စာတစ္ေၾကာင္းေရာက္တဲ့ေနရာ
ကေနရပ္ၿပီးေနာက္တေၾကာင္းA သစ္စခုိင္းခ်င္ရင္သုံးပါတယ္..Empty Element A မ်ိဳးA စားျဖစ္ၿပီး End Tag မ႐ွိပါဘူး..
Uပမာ..
<p></p> ဆုိတာကေတာ့ Webpage မွာ စာပုိဒ္ေတြ ေရးခ်င္တဲ့ေနရာ မွာသုံးပါတယ္.. Container Element
A မ်ိဳးA စားျဖစ္ၿပီး.. End Tag ကိုထည့္မေရးပလဲ ည္းသုံးလို႕ရပါတယ္.. ဒါေပမယ့္ တခ်ိဳ႕A ေျခA ေနေတမြ ွာ
ပုံမွန္A တုိင္းA လုပ္မလုပ္ပဲေနတတ္လုိ႕ End Tag ကုိခ်န္မထားခဲ့ရင္ ေတာ့A ေကာင္းဆုံးေပါ့.. Uပမာ..
14
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၉) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၉)
<i></i> ဆုိတာကေတာ့ စာလုံးေတြကုိ A ေစာင္းလုိက္ေလးေပၚေA ာင္ Italicize လုပ္တဲ့ Element ပါ.. Uပမာ..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၀) A တုိင္းျမင္ရပါမယ္..
15
(ပုံ-၅.၁၀)
<b></b> ဆုိတာကေတာ့ စာလုံးေတြကုိ ပုိၿပီးထင္႐ွားလာေA ာင္ Bold လုပ္တဲ့ Element ပါ.. Uပမာ..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၁) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၁၁)
Comments »
The URI to TrackBack this entry is: http://neepyinnyar.blogsome.com/2008/02/21/12/trackback/
16
HTML ေလးေလ့လာရေA ာင္ (A ပိုင္း-၄)
ဒီေနရာမွာ စကားမစပ္ Element ေတြA ေၾကာင္း က်ေနာ္ေျပာသြားတဲ့ေနရာမွာ သူရဲ႕ Attribute
ေတြA ေၾကာင္းသီးသန္႕ေရးမသြားေတာ့ပါဘူး.. A ားလုံးၿပီး သြားတဲ့A ခါမွာ စာA ုပ္တစ္A ုပ္က်ေနာ္တင္ေပးပါမယ္..
A ဲ့ဒီစာA ုပ္မွာ Element A ားလုံးနဲ႕ သူ႕ရဲ႕ Attribute A ားလုံးကုိ Master Reference A ေနနဲ႕ ေရးထားပါတယ္.. A ခု
ပဒုမၼာ ပုိ႕စ္ေတြမွာေတာ့ Main Element ေတြကိုပဲ ေရးသာြ း ခ်င္ပါတယ္..
ကဲ.. ဒီေန႕ေတာ့ Inline Highlighting ေတြနဲ႕ ဆုိင္တဲ့ Element ေတြ ကုိ (ပုံ-၅.၁၁) မွာ ဖတ္ၾကည့္ရေA ာင္..
(ပုံ-၅.၁၁)
[/color]
<tt></tt> ဆုိတာကေတာ Monospaced Text နဲ႕ေပၚခ်င္ရင္သုံးပါ တယ္.. Typewriter Text လုိ႕လည္းေခၚပါတယ္..
<kbd></kbd> ဆုိတာကလည္း Monospaced Text ပါပဲ.. Keyboard ရဲ႕A တုိေကာက္စာလုံးပါ..
<samp></samp> ဆုိတာလည္း Monospaced Text ပါပဲ.. Sample Text ရဲ႕A တုိေကာက္ပါ..
<code></code> ဆုိတာလည္း Monospaced Text ပါပဲ..program code ကုိေျပာတာပါ
<var></var> ဆုိတာကေတာ Italic စာလုံးA ေစာင္းေလးေတြ နဲ႕ေပၚခ်င္ရင္သုံးပါ တယ္.. A ႐ွည္ကေတာ့ Variable ပါ..
<cite></cite> ဆုိတာလည္း စာလုံးA ေစာင္းပါပဲ.. citation ရဲ႕ A တုိေကာက္စာလုံးပါ..
<dfn></dfn> ဆုိတာလည္းစာလုံးA ေစာင္းပါပဲ defination ရဲ႕ A တုိေကာက္စာလုံးပါ..
<strike></strike> ဆုိတာကေတာ စာလုံးေတြကုိ ကန္႕လန္႕မ်U္း တစ္ေၾကာင္းနဲ႕ ဖ်က္ခ်င္တဲ့A ခါမွာသုံးပါတယ္..
သူကေတာ့ HTML.v3.2 တုန္းက element ေတြဆုိေတာ့ Old Browser ေတြနဲ႕A ဆင္မေျပပါဘူး..
17
<s></s> ဆုိတာကလည္း <strike> နဲ႕တူပါတယ္.. ဒါေပမယ့္ သူက HTML.v.4.0 ဆုိေတာ့ လက္႐ွိသုံးေနတဲ့ Recent
Browser ေတြနဲ႕A ားလုံး A ဆင္ေျပပါတယ္..
<del></del> ဆုိတာကေတာ စာလုံးေတြကုိ Underline တားခ်င္တဲ့ A ခါမွာသုံးပါတယ္.. Delete
ရဲ႕A တုိေကာက္စာလုံးပါ..
<ins></ins> ဆုိတာလည္း <del> နဲ႕A တူတူပါပဲ.. မ်U္းတားတဲ့ ေနရာမွာသုံးတာပါ..
<u></u> ဆုိတာက မ်U္းတားတဲ့ေနရာသုံးတာမွန္ေပမယ့္ သူက HTML.v.3.2 တုန္းကသတ္မွတ္ထားတဲ့ element ပါ..
ဒီ Inline Highlighting Elements ေတြကုိစုၿပီး UပမာA ေနနဲ႕ေရးမယ္ဆုိရင္..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၃) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၁၃)
ဒီေန႕ေတာ့ List Element ေတြA ေၾကာင္းေျပာရေA ာင္..
<li></li> ဆုိတာကုိယ္ေရးခ်င္တဲ့ စာရင္းေတြစာေတြကုိ List A ေနနဲ႕ ေပၚေစခ်င္တဲ့A ခါမွာသုံးပါတယ္.. A ဲ့ေနရာမွာ List
ကုိ Unordered List <ul> နဲ႕ Ordered List <ol> ဆုိၿပီး (၂) မ်ိဳး႐ွိပါတယ္.. <ul> နဲ႕ <ol> Elements မ်ားA တြင္း မွာ
<li> Element ကုိ Nested ထားၿပီးေရးပါတယ္..
18
<ol></ol> ဆိုတာ စာရင္းေတစြ ာေတြကို 1,2,3.. ဆိုၿပီးA စU္လိုက္ စီၿပီးျပတဲ့ Ordered List ပါ..
<ul></ul> ဆုိတာ စာရင္းေတြစာေတြကုိ A စU္လုိက္မဟုတ္ပဲ.. Bullet မ်ားနဲ႕ျပေပးတဲ့ Unordered List ပါ..
Ordered List နဲ႕ Unordered List A သုံးျပဳပုံကုိ UပမာA ေနနဲ႕ေရးမယ္ဆုိ ေA ာက္ပါA တုိင္းေတြ႕ရမွာျဖစ္ပါတယ္..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၄) A တုိင္းျမင္ရပါမယ္..
19
(ပုံ-၅.၁၄)
ဒီေနရာမွာတစ္ခု ဆက္စပ္ၿပီး႐ွင္းျပခ်င္တာ.. Space ေတြ Tab ေတြနဲ႕ Enter( Return)
ကီးေတြကုိသုံးတာနဲ႕ပါတ္သတ္လုိ႕ပါ.. HTML မွာကုိယ္ဘယ္ေလာက္ ပဲ Space ေတြျခားျခား.. Tab ေတြဘယ္လုိပဲခုန္ခုန္..
Enter ေတြဘယ္ ေလာက္ပဲေခါက္ ေခါက္.. Browser ကေတာ့ <pre> ဆုိတဲ့ Element ကုိမသုံးမထားမခ်င္း 1 Space
A ေနနဲ႕သတ္မွတ္ၿပီး Webpage မွာျပမွာပါပဲ.. ျမင္သာေA ာင္ေျပာရရင္ ေစာေစာက (ပုံ-၅.၁၄) A တြက္ေရးထားတဲ့ HTML
Code ေတြကုိ Microsoft Word ထဲကုိ ေကာ္ပီကူးထည့္ၿပီး.. Tools Bar ေပၚက pilcrow (¶) လုိ႕ေခၚတဲ့ Paragraph Sign
ေလးကုိႏွိပ္ၾကည့္မယ္ဆုိ ေA ာက္က (ပုံ-၅.၁၅) A တုိင္းျမင္ရမွာပါ..Pilcrow ဆုိတာ
ကုိယ္ေရးထားတဲ့ Document မွာ မလုိA ပ္တဲ့ Whitespace ေတြပါမပါစစ္တဲ့ Tools တစ္ခုပါပဲ.. ပုံမွာျပထားပါတယ္..
(ပုံ-၅.၁၅)
ပုံမွာဘာကုိေတြ႕လည္းဆုိေတာ့ HTML Code ေတြကုိေရးတဲ့A ခါမွာ မ်က္စိ႐ွင္း ေA ာင္ Code
ေတြကုိဖတ္ရတာလြယ္ေA ာင္.. Tab ေတြ Enter Key ေတြ Space ေတြကုိ ကုိယ္ႀကိဳက္သလုိသုံးမိပါတယ္.. (ပု-၅.၁၅)
မွဆုိ Ordered နဲ႕ List ဆုိတဲ့စာလုံးၾကားမွာ.. ေမ့ၿပီး.. Space (၅) ခုေတာင္ခ်မိသြားပါတယ္.. ဒါေပ မယ့္ Browser မွာေတာ့
ပုံမွန္A တုိင္း Space (၁)ခုပဲျပပါတယ္.. ဒါကုိၾကည့္ရင္ က်ေနာ္A ရင္ပုိ႕စ္ေတြတုန္းကေျပာခဲ့တဲ့.. Browserဟာ HTML Tag
(Element) ေတြေျပာတဲ့A တုိင္းပဲ Page တစ္ခုကုိေနရာခ်ေပးပါတယ္.. သူ႕ကုိA ေထြA ထူး ေျပာမထားဘူးဆုိရင္
Whitespace ေတြကုိ Ignore လုပ္သြားပါတယ္..
20
Space ေတြ Tab ေတြ Enter ေတြသုံးတာနဲ႕ ပါတ္သတ္လုိ႕နားလည္ၿပီ ဆုိရင္.. Comments ေတြကုိ HTML Code
ေတြထဲမွာ ဘယ္လုိထည့္ေရးလည္း ဆုိတာကုိတခါတည္းဆက္ၿပီးေရးသြားခ်င္ပါတယ္.. Comments ဆုိတာကေတာ့
Programming တစ္ခုကုိေရးတုိင္း မသုံးမျဖစ္သုံးရတဲ့A ရာတစ္ခုပါ.. ဒါမွလည္း ကုိယ္ေရးထားတဲ့ Code
ကုိဘာA တြက္ေရးထားလည္းဆုိတာ ေနာင္တခ်ိန္ ကုိယ္ပဲဖတ္ဖတ္.. သူမ်ားပဲနမူနာA ျဖစ္ၾကည့္ၾကည့္..
႐ွင္း႐ွင္းလင္းလင္းနဲ႕ ျပန္ဖတ္ႏုိင္မွာပါ.. HTML မွာ Comment ေရးတဲ့ပုံစံက ေA ာက္ပါA တုိင္းျဖစ္ပါ တယ္.. Sign (၂)
ခုၾကားမွာ ကုိယ္ေရးခ်င္တဲ့ Comment ကုိေရးရပါတယ္.. Browser ကေတာ့ သူ႕ကုိ Comment A ေနနဲ႕ေျပာထားလုိ႕
Webpage မွာေတာ့ျပမွာမဟုတ္ပါဘူး.. UပမာA ေနနဲ႕..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၆) A တုိင္းျမင္ရပါမယ္.
.
(ပုံ-၅.၁၆)
<a></a> ဒီေန႕ေတာ့ Hyper Link ေတြကုိဘယ္လုိလုပ္ လည္းေျပာရေA ာင္.. A င္တာနက္ Browser ေတြမွာ လက္ပုံစံ
Hyper Link ေတြျဖစ္လာဖုိ႕.. က်ေနာ္ တုိ႕သုံးရတဲ့ Element ကေတာ့ <a> ( Anchor ) ဆုိတဲ့ Element ပဲျဖစ္ပါတယ္ ..
သူကုိသုံးမယ္ဆုိ မပါမျဖစ္ပါရမယ့္ Attribute ကေတာ့.. href ပဲ ျဖစ္ပါတယ္.. href ဆုိတာကေတာ hypertexe reference
ကုိဆုိလုိတာပါ.. UပမာA ေနနဲ႕
ဆုိတာကေတာ့
21
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၇) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၁၇)
Home ဆုိတဲ့ Text ဟာ A ခုခ်ိန္မွာဆုိ Hypertext တစ္ခုA ေနနဲ႕ သူ႕ကုိႏွိပ္ရင္ index.htm ဆုိတဲ့ Web Page
ကုိဖြင့္ေပးမွာျဖစ္ပါတယ္.. About Us နဲ႕ Contact တုိ႕ကုိပါ A ျပန္A လွန္ခ်ိတ္ဆက္ခ်င္တယ္ဆုိရင္ ေA ာက္ပါ A တုိင္း
ဆက္ေရးႏုိင္ပါတယ္..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၈) A တုိင္းျမင္ရပါမယ္..
[center](ပုံ-၅.၁၈)[/center]
ဒီပဒုမၼာ Post ေတြမွာက HTML Basic ပဲဆုိေတာ့..Elements ေတြရဲ႕ Attribute A ားလုံးကိုဒီမွာေရးသာြ းမွာမဟုတ္ပါဘူး..
A ေရးႀကီးတဲ့.. သိသင့္တဲ့.. Attribute ေတြကုိပဲေရးသြားပါမယ္.. ဒီ <a> Element မွာဆုိ သိသင့္တဲ့ Attribute ကေတာ့
target="_blank" နဲ႕ target="_self" ပဲျဖစ္ပါတယ္.. _top, _parent တုိ႕လည္း႐ွိပါေသးတယ္..
A ဲ့ဒါA တြက္A သုံးကုိေတာ့ ေနာက္ပုိ႕စ္ေတြမွေျပာျပသြားပါမယ္.. _blank ကေတာ့ Hypertext တစ္ခု ကုိဖြင့္လိုက္ရင္ New
Window A ေနနဲ႕တက္လာေစခ်င္ရင္သုံးၿပီး.. _self ကေတာ့ လက္႐ွိပြင့္ၿပီးသား Windows
A တြင္းမွာပဲျပန္ေပၚေစခ်င္ရင္သုံး ပါတယ္.. UပမာA ေနနဲ႕ေရးမယ္ဆုိ..
22
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၁၉) A တုိင္းျမင္ရပါမယ္..
[center](ပုံ-၅.၁၉)[/center]
[center] [/center]
[center]ဒီေလာက္ဆုိရင္ Anchor ရဲ႕A သုံးျပဳပုံကုိသေဘာက္ေပါက္မယ္ထင္ပါတယ္..
HTML ေလးေလ့လာရေA ာင္ (A ပိုင္း-၅)
ဒီေန႕ေတာ့ ကုိယ္ေရးထားတဲ့စာေတြ ..ကုိယ္တင္ခ်င္တဲ့ contents ေတြကုိ ဘယ္လုိ Align လုပ္မလည္းဆုိတာ
ဖတ္ရေA ာင္.. သိပ္ေတာ့မခက္ပါဘူး.. align ဆုိတဲ့ attribute ကုိ ကုိယ္ညွိခ်င္တဲ့ Elements ေတြထဲကုိထည့္ၿပီး
သုံးသြားတာပါပဲ.. က်ေနာ္တုိ႕ေရးထားၿပီးသား Code ထဲကပဲ Uပမာ ျပန္လုပ္ ၾကည့္ရေA ာင္..
23
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၂၀) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၂၀)
<center></center> တကယ္လုိ႕မ်ား align attribute နဲ႕center ညွိလုိ႕မရတဲ့ <ul> လုိ <img> လုိ Elements ေတြကုိ
center ညိွခ်င္တဲ့A ခါျဖစ္ေစ.. တစ္ခုထက္ပုိတဲ့ Elements ေတြကုိ တခါတည္း Block ပုံစံမ်ိဳး ညွိခ်င္တဲ့A ခါျဖစ္ေစ..
သုံးရမယ့္ Element ကေတာ့ <center> ျဖစ္ပါတယ္.. Uပမာ..
24
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၂၁) A တုိင္းျမင္ရပါမယ္.. ဘာထူးျခားလည္းဆုိရင္ attribute မွာ သီးျခား align
လုပ္ထားတာမ႐ွိတဲ့ <ul> လုိ Element ကုိေတာ့ A လယ္ညွိယူသြားၿပီး.. <h1 align="center"> လုိ
ညွိထားတာခ်င္းတူတဲ့ Element ကုိေတာ့ <center> က overwrite လုပ္သြားပါတယ္..
(ပုံ-၅.၂၁)
ေနာက္သိသင့္တာတစ္ခုကဆက္သြားရေA ာင္.. မ်ားေသာA ားျဖင့္သတိထား ၾကည့္မိမယ္ဆုိရင္
၀က္ဘ္ဆုိက္ေတာ္ေတာ္မ်ားမ်ားမွာ.. ၀က္ဆုိက္နဲ႕ပတ္သတ္ ၿပီး Feed back ေတြေရးဖုိ႕.. ဆက္သြယ္ဖုိ႕.. Contact
Address Block ေတြေရး တတ္ၾကပါတယ္.. A ဲ့တာေလးတစ္ခုေလာက္ လုပ္ၾကည့္ရေA ာင္..
25
<hr>ဆုိတာကေတာ့ ကုိယ္ေရးမယ့္လိပ္စာနဲ႕ လုိင္းတခုျခားဖုိ႕ သုံးထားတာပါ.. A ရွည္ကေတာ့ Horizontal Reference
ပါ..
<address></address> ကေတာ့ ကုိယ္ေရးမယ့္ လိပ္စာေတြ A တြက္ Address Block တစ္ခုလုပ္ဖုိ႕သုံးတာပါ..
A ီးေမးလ္လိပ္စာကုိေတာ့ mailto: နဲ႕တြဲေရးပါတယ္.. ယူဇာA ေနနဲ႕ ႏွိပ္လုိက္ ရင္ကုိယ့္သုံးမယ့္ Email Software ရဲ႕
Address Block မွာ A လုိA ေလွ်ာက္ ျဖည့္ေပးသြားပါမယ္..
A င္တာနက္မွာ Email SpamBot ေတြေနာက္ပုိင္းမ်ားလာေတာ့ Spam ေတြမ၀င္ေစခ်င္ရင္ေတာ့ ကုိယ့္ရဲ႕ Personal Email
ကုိမသုံးတာေကာင္းပါတယ္ သီးသန္႕ Public Mail ကုိသုံးတာA ႏၱရာက္ကင္းတာေပါ့..
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၂၂) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၂၂)
က်ေနာ္ေနာက္ထပ္ပုိ႕စ္လုပ္ခ်င္တာက Destination Anchor ေတြနဲ႕ <pre> Element A ေၾကာင္းပါ.. သာမန္ Link
လုပ္တဲ့ Anchor ေတြကေတာ့သိၿပီးသြား ၿပီးလုိယူဆပါတယ္.. Destination Anchor ဆုိတာကေတာ့ Web Page တစ္ခု မွာ
ကုိယ္မွတ္ထားတဲ့ ေနရာတစ္ခုကုိ Hyper Text နဲ႕A ျပန္A လွန္ခ်ိတ္တာပါပဲ.
<pre></pre> ဆုိတာကေတာ့ ကုိယ္လုိခ်င္တဲ့ Format ပုံစံကုိ Word Processor ထဲမွာေရးရသလုိေပၚခ်င္လုိ႕သုံးတာပါ..
UပမာA ေနနဲ႕ဆုိ ..ဒီလုိေရးၾကည့္ရေA ာင္..
26
မွတ္ခ်က္။ Press Enter Key for 30 times!!! ဆုိတဲ့ေနရာေရာက္ရင္ Enter (Return) Key ျဖင့္ စာေၾကာင္း (၃၀)
A လြတ္ေခါက္ခ်ပါ..
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၂၃) A တုိင္းျမင္ရပါမယ္..
27
(ပုံ-၅.၂၃)
ကုိယ္သြားခ်င္တဲံ ေနရာကုိ A ျပင္A လွန္ခ်ိတ္ဆက္သြားနုိင္တာကုိေတြ႕ရမွာပါ.. ဒီေနရာမွာ သတိထားရမယ့္A ခ်က္က
name="top" ဟာ name="Top" နဲ႕ လုံး၀မတူပါဘူး.. Case Sensitive ျဖစ္ပါတယ္..
================================================================
==============================================
ဒီေန႕ေတာ့ ၀က့္ဘ္ဆုိက္ထဲမွာ ဓာတ္ပုံေတြဘယ္လုိထည့္လည္းလုပ္ၾကည့္ရ ေA ာင္..
<img> ဆုိတာကေတာ့ က်ေနာ္တုိ႕ ထည့္ခ်င္တဲ့ Image ေတြ A တြက္A ဓိကသုံးရမယ့္ Element ပဲျဖစ္ပါတယ္..
Standalone Element A မ်ိဳးA စားဆုိတာ Eng Tag မပါကတည္းကသတိျပဳမိမွာပါ.. နမူနာေရးၾကည့္ရ ေA ာင္..
ဒီUပမာေပၚမွာဆုိရင္ src (source) ဟာ ps_0001.gif ကုိ Browser ေပၚမွာ ေပၚေA ာင္လုပ္ေပးတဲ့ attribute ျဖစ္ပါတယ္..
ဒီေနရာမွာတခုသတိထားရမွာက <img> ဟာ Inline Element ျဖစ္တဲ့A တြက္ေၾကာင့္ <p></p> Element ထဲ မွာ
Nested ျဖစ္ေA ာင္ေရးထားပါတယ္.. တကယ္လုိ႕ <body></body> ထဲမွာ တုိက္႐ုိက္ေရးရင္လည္း Browser ကေတာ့
ဘာမွေျပာမွာမဟုတ္ပါဘူး.. ဒါေပမယ့္ W3C ရဲ႕ HTML Validator နဲ႕စစ္ေဆးမယ္ဆုိရင္ေတာ့ Error Report
ေတာ့ျပမွာေပါ့..
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၂၄) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၂၄)
<img> Element A တြက္ေနာက္ထပ္A ေရးႀကီးတဲ့ attribute ကေတာ့ width နဲ႕ height ပဲျဖစ္ပါတယ္.. ဒီ attribute
ကုိထည့္ေပးျခင္းA ားျဖင့္ Browser ေပၚမွာ ပုံေတြA ျပည့္A ၀မေပၚႏုိင္ေသးခင္ တျခားစာေတြနဲ႕ contents
28
ေတြကုိျပသေပးဖုိ႕ A ျမန္ႏႈန္းA ားျမွင့္ေပးပါတယ္.. A ဲ့လုိမွထည့္မေပးထားရင္ ကုိယ္ျပခ်င္တဲ့ပုံကုိပဲသူကA ရင္ Load
လုပ္ေနမွာပါ.. ေစာေစာက Code မွာထပ္ ျဖည့္မယ္ဆုိရင္ ေA ာက္ပါA တုိင္းျဖစ္ပါမယ္..
ေနာက္တစ္ခ်က္က width နဲ႕ height ကုိေဖာ္ျပတဲ့A ခါမွာ သူ႕ရဲ႕တကယ္ Rule ကေတာ့ Image ရဲ႕ တကယ္႐ွိရင္း
A က်ယ္နဲ႕ A ျမင့္ကုိပဲေရးရမွာျဖစ္ပါတယ္.. ဆုိက္ကုိခ်ံဳ႕ခ်င္လုိ႕.. width နဲက height ကုိေလ်ာ့ထည့္တာဟာ Bandwidth
ကုိျဖဳန္းတီးတာသက္သက္ပဲျဖစ္မွာပါ.. Loding Time နဲ႕ Bandwidth ကေတာ့ ေလ်ာ့သြားမွာမဟုတ္ပါဘူး
A ေရးႀကီးတဲ့ ေနာက္ attribute တစ္ခုကေတာ့ alt (alternative text) ပဲျဖစ္ပါ တယ္.. သူ႕ကုိေတာ့ တစ္ခ်ိဳ႕ေက်ာင္းေတြ..
႐ုံးေတြမွာ ဓာတ္ပုံေတြကုိမၾကည့္ေစ ခ်င္လုိ႕ Browser မွာ Text သီးသန္႕ေပၚေစဖုိ႕လုပ္ထားတဲ့A ခါမွာျဖစ္ေစ..
ေကာ္နက္႐ွင္ေႏွးတဲ့လုိင္းေတြမွာျဖစ္ေစ.. ပုံေတြကမေပၚေပမယ့္.. ဘာပုံလည္း ဆုိတာ
A ၾကမ္းဖ်U္းသိနုိင္ဖုိ႕ထည့္ေပးရပါတယ္.. Uပမာ
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၂၅) A တုိင္း floating text A ေနနဲ႕ ျမင္ရပါမယ္..
(ပုံ-၅.၂၅)
တကယ္လုိ႕မ်ား Internet Option မွာ Show Picture ကုိျဖဳတ္ထားမယ္ဆုိရင္ (ပုံ-၅.၂၆) A တုိင္းျမင္ရမွာပါ..
29
(ပုံ-၅.၂၆)
[left] ဓာတ္ပုံေတြေတာ့ထည့္တတ္ၿပီ သူတုိ႕ကုိ လုိခ်င္တဲ့ေနရာမွာထားႏုိင္ဖုိ႕ align လုပ္ဖုိ႕လုိလာျပန္ၿပီ.. Vertically လား
Horizontally လား..?
<img> Element မွာ align="left" align="right" ကုိသုံးႏုိင္ေပမယ့္.. သူ႕ကုိ တကယ္ေတာ့ floating image
A ေနနဲ႕ပဲသုံးတာပါ.. သီးသန္႕ Horizontally alignment ညွိမယ္ဆုိရင္ေတာ့ သူ႕ကုိ Nested လုပ္ထားတဲ့ Parent
Element ျဖစ္တဲ့ <p> Element မွာ align attribute ကုိထည့္သုံးရပါတယ္.. Uပမာ
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၂၇) A တုိင္းျမင္ရပါမယ္..
[center](ပုံ-၅.၂၇)[/left]
ညာဘက္ကုိ ညွိခ်င္တယ္ဆုိရင္ေတာ့ <p align="right" > လုပ္လုိက္ယုံပါပဲ..
ဒီတစ္ခါ Vertical Alignment ကုိဘယ္လုိလုပ္လည္း ဆက္ၾကည့္ရေA ာင္..
<img> Element မွာ Vertical Alignment A တြက္ align attribute ကုိသုံးလုိ ရပါတယ္.. Default A ရေတာ့ Bottom
Align ျဖစ္ၿပီးသားပါ.. Uပမာ
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၂၈) A တုိင္းျမင္ရပါမယ္..
30
[center](ပုံ-၅.၂၈)
ေနာက္တစ္မ်ိဳး align="top" ဆုိရင္..
(ပုံ-၅.၂၉)
ေနာက္တစ္မ်ိဳး align="middle" ဆုိရင္..
(ပုံ-၅.၃၀)
ဒါမွမဟုတ္ပဲ Text ကုိ Image ရဲ႕ေA ာက္မွာ Wrapping လုပ္ခ်င္တယ္ဆုိရင္ ေတာ့ <br> Element
ကုိထပ္ထည့္ေပးလုိက္ယုံပါပဲ.. Uပမာ..
Browser ေပၚမွာ ဆုိရင္ေတာ့ (ပုံ-၅.၃၁) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၃၁)
31
က်ေနာ္ေျပာမယ္ေျပာမယ္နဲ႕ မဆက္စပ္လုိ႕ ပုိ႕စ္ထဲမွာ Contents ဆုိတဲ့ A သုံးA ႏႈန္းကုိ Web
မွာဘယ္လုိနားလည္လည္းဆုိတဲ့ A ေၾကာင္းမေရးျဖစ္ဘူး. A ခု ဒီပုိ႕စ္မွာ ေနာင္ Web Contents ကုိမ႐ႈပ္ေထြးရေA ာင္
႐ွင္းျပခ်င္ပါတယ္.. (ပုံ-၅.၃၂) မွာျပထားသလုိ က်ေနာ္တုိ႕ေန႕စU္ Internet ေပၚကေန Transfer လုပ္ယူေနတဲ့ text,
images, sounds, video နဲ႕ animations လုိ Documents ေတြကုိ Contents လုိ႕ ေခၚႏုိင္ပါတယ္..
တကယ္တမ္းA ေသးစိတ္ေျပာရမယ္ ဆုိရင္ေတာ့ MIME Media Types ေတြA ေၾကာင္းပါေျပာရမွာမွာပါ.. ေနာက္ပုိ႕စ္
ေတြက်မွ MIME A ေၾကာင္းကုိဆက္ဖတ္တာေပါ့.. A ခ်ိန္ရရင္ေရးသြားပါမယ္..
(ပုံ-၅.၃၂)
က်ေနာ္တုိ႕ Web Contents A ေၾကာင္းA ၾကမ္းဖ်U္းနားလည္ၿပီဆုိရင္ HTML မွာ Relative URLs နဲ႕ Absolute URLs
ဆုိတာဘာလည္း ဆုိတဲ့A ေၾကာင္း ဆက္ေျပာရေA ာင္..
Relative URLs ဆုိတာ ?
Relative Uniform Resource Locator (Relative URLs) ဆုိတာကေတာ့ Web Site တစ္ခုမွာ Webpage နဲ႕ သူ႕နဲ႕
(Link) ခ်ိတ္ဆက္ေနတဲ့ Contents ေတြရဲ႕ (Location) တည္ေနရာပဲျဖစ္ပါတယ္.. သူ႕ကုိ Partial URL လုိ႕လည္းေခၚၾကပါ
ေသးတယ္.. Absolute URL လုိ http://www ေတြနဲ႕A ျပည့္မျပပဲ.. တကယ္ Contents ႐ွိတဲ့ေနရာကုိပဲျပလုိ႕ Partial URL
( တစိတ္တေဒသျပ URL ) လုိ႕ ေခၚတာပါ.. UပမာA ေနနဲ႕(ပုံ-၅.၃၃) မွာ နမူနာ႐ွင္းျပထားပါတယ္..
Reduced: 90% of original size [ 800 x 600 ] - Click to view full image
32
(ပုံ-၅.၃၃)
ပုံမွာျပထားတာကုိ႐ွင္းရမယ္ဆုိရင္ေတာ့.. Web Server တစ္ခုဟာလည္း Computer တစ္လုံးျဖစ္တာမုိ႕လုိ႕ သူ႕ထဲမွာ
Documets ေတြကုိ သာမန္ ကြန္ပ်ဴတာတစ္လုံးမွာလုိ Tree Structure နဲ႕ပဲသိမ္းဆည္းပါတယ္.. နမူနာA ေနနဲ႕
က်ေနာ့္ကြန္ပ်ဴတာထဲက ဖုိင္ေတြသိမ္းထားတဲ့ Tree Structure ကုိ Command Prompt ကေန (ပုံ-၅.၃၄) A တုိင္း
နမူနာၾကည့္ႏုိင္ပါတယ္..
33
(ပုံ-၅.၃၄)
ဒီေတာ့ HTML မွာေရာ Web Contents ေတြဘယ္လုိခ်ိတ္ထားလည္း? ပုိၿပီးနားလည္သြားေA ာင္ Relative URLs
A ေၾကာင္းကုိ ေလ့က်င့္ခန္းေလး တစ္ခုလုပ္ၾကည့္ရေA ာင္..Lesson ဖုိင္ကုိ Download lesson_001.zip ( 65.55K
) Number of downloads: 7
လုပ္ပါUီး..
ဒီေတာ့ HTML မွာေရာ Web Contents ေတြဘယ္လုိခ်ိတ္ထားလည္း? ပုိၿပီးနားလည္သြားေA ာင္ Relative URLs
A ေၾကာင္းကုိ ေလ့က်င့္ခန္းေလး တစ္ခုလုပ္ၾကည့္ရေA ာင္.. Lesson ဖုိင္ကုိ Download လုပ္ပါUီး..
Download လုပ္လုိ႕ရတဲ့ Zip ဖုိင္ထဲမွာ (ပုံ-၅.၃၅) ထဲကA တုိင္း Image, Directory တစ္ခ်ိဳ႕နဲ႕ HTML ဖုိင္ေတြပါပါမယ္..
(ပုံ-၅.၃၅)
www Folder ထဲက index.html ကုိဖြင့္လုိက္မယ္ဆုိရင္ ေA ာက္ပါပုံA တုိင္း ေလ့က်င့္ခန္းနမူနာ Page ကုိေတြ႕မွာပါ..
(ပုံ-၅.၃၆)
ဒီေနရာမွာ Relative URL နဲ႕ပါတ္သတ္ၿပီး Down နဲ႕ Up ကုိ႐ွင္းျပရမယ္ဆုိရင္.. Down ဆုိတာ Page တစ္ခုကေန
သူ႕ေA ာက္ဘက္ Directory မွာ႐ွိတဲ့ Contents ေတြဆီ ခ်ိတ္ထားတယ္ဆုိရင္ Down ျဖစ္ၿပီ.. ေA ာက့္ဘက္ Directory
ေတြကေန.. A ထက္ဘက္ Directory မွာ႐ွိတဲ့ Contents ေတြဆီကုိ ျပန္ခ်ိတ္တာကေတာ့ Up ျဖစ္ပါတယ္.. (ပုံ-၅.၃၇)
မွာနမူနာၾကည့္ႏုိင္ပါတယ္..
34
(ပုံ-၅.၃၇)
ပုံမွာကေတာ့ A ၾကမ္းဖ်U္းသေဘာေပါက္ေA ာင္ျပထားတာပါ..လက္ေတြ႕ A ေနနဲ႕Download
လုပ္ထားတဲ့ေလ့က်င့္ခန္းဖုိင္နမူနာထဲက index.html ကေနတဆင့္ For Up, For Down, For Up & Down ကေန Click
လုပ္ၿပီးၾကည့္မယ္ဆုိရင္ (ပုံ-၅.၃၈) A တုိင္ Result တစ္ခုတည္းပဲေတြ႕မွာပါ.. ဒါေပမယ့္ Page ေတြကုိ Right Click > View
Source ကုိၾကည့္မယ္ဆုိရင္ A ေနာက္မွာေရးထားတဲ့ Code ေတြကမတူတာကုိေတြ႕မွာပါ..
35
(ပုံ-၅.၃၈)
View Source ကုိၾကည့္ဖုိ႕A တြက္ (ပုံ-၅.၃၉) A တုိင္းျပဳလုပ္ပါ..
(ပုံ-၅.၃၉)
View Source မွာဆုိရင္ Same Level မွာ႐ွိတဲ့ padonma.gif ဆုိတဲ့Contents ကုိခ်ိတ္ဆက္ဖုိ႕ A တြက္
src="padonma.gif"
ဆုိၿပီးတုိက္ရုိက္ေရးႏုိင္ပါတယ္..A ကယ္လုိ႕Down Level Directory မွာ႐ွိတဲ့
Contents တစ္ခုကုိ ခ်ိတ္ဖုိ႕A တြက္ဆုိရင္ေတာ့.. Unix Directory Structure A တုိင္း /dir/dir/*.* ဆုိၿပီး ခ်ိတ္ပါတယ္..
*.* ဆုိတာကေတာ့ Wildcard ပါ.. ဘာကုိဆုိုလုိသလည္းဆုိတာကေတာ့ *.* = filename.extension ပါ.. Wildcard
ေတြA ေၾကာင္းကုိသိခ်င္တယ္ဆုိ ေနာက္မွသီးသန္႕ပုိ႕စ္လုပ္ပါမယ္. A ခုေတာ့Uပမာကုိၾကည့္ရေA ာင္..
down_dir_level_one ဆုိတဲ့ Directory A တြင္းမွာ႐ွိတဲ့ html.gif ကုိခ်ိတ္ဖုိ႕A တြက္.. <img> Element A တြင္းမွာ
src="down_dir_level_one/html.gif"
ဆုိၿပီးေရးရပါတယ္.. တကယ္လုိ down_dir_level_two Directory A တြင္းမွာ႐ွိတဲ့ ie.jpg ဆုိတဲ့ Contents
တစ္ခုကုိထပ္ခ်ိတ္မယ္ဆုိ
src="down_dir_level_one/down_dir_level_two/ie.jpg"
36
လုိ႕ေရးရမွာပါ..က်ေနာ္ေပးထားတဲ့ ေလ့က်င့္ခန္း Pageေတြက down.html ကုိ View Source နဲ႕ၾကည့္မယ္ဆုိရင္
ေA ာက္ကA တုိင္းေတြ႕ရပါမယ္..
A ျပန္A လွန္A ားျဖင့္ Up Level Directory မွာ႐ွိတဲ့
Contents တစ္ခုကုိ ခ်ိတ္ဖုိ႕A တြက္ဆုိရင္ေတာ့.. Unix Directory Structure A တုိင္း /../../*.* ဆုိၿပီး ခ်ိတ္ပါတယ္..
Uပမာ.. up.html ၀က့္ဘ္ေပ့ခ်္ကေန A ေပၚ Level (၃) ဆင့္မွာ႐ွိတဲ့ up_dir_level_one Directory A တြင္းမွာ႐ွိတဲ့
padonma.gif ကုိခ်ိတ္ဖုိ႕A တြက္.. <img> Element A တြင္းမွာ
src="../../../padonma.gif "
ဆုိၿပီးေရးရပါတယ္.. တကယ္လုိ A ေပၚ Level (၂) ဆင့္မွာ႐ွိတဲ့ up_dir_level_two Directory A တြင္းမွာ႐ွိတဲ့ html.gif
ဆုိတဲ့ Contents တစ္ခုကုိထပ္ခ်ိတ္မယ္ဆုိ
src="../../html.gif"
လုိ႕ေရးရမွာပါ..က်ေနာ္ေပးထားတဲ့ ေလ့က်င့္ခန္း Pageေတြက up.html ကုိ View Source နဲ႕ၾကည့္မယ္ဆုိရင္
ေA ာက္ကA တုိင္းေတြ႕ရပါမယ္..
37
ေနာက္ဆုံး Page ျဖစ္တဲ့ up_down.html မွာေတာ့ Up Level Directory A သုံးျပဳတာေရာ Down Level Directory
ကုိခ်ိတ္တာပါေရးထားပါတယ္.. View Source မွာၾကည့္မယ္ဆုိရင္ေA ာက္ပါA တုိင္းျမင္ရပါမယ္..
က်ေနာ္႐ွင္းျပတာမ်က္စိလည္ေကာင္းလည္မွာပါ.. ေကာင္းတာကေတာ့ Download ခ်ထားတဲ့
ေလ့က်င့္ခန္းကုိနမူနာထားၿပီး.. မိမိကုိယ္ပုိင္ Notepad နဲ႕ Browser ကုိA သုံးျပၿပီးလက္ေတြ႕ခ် ေလ့က်င့္မယ္ဆုိရင္ေတာ့
႐ွင္းသြားမယ္လုိ႕ ေမွ်ာ္လင့္ပါတယ္..
Comments »
HTML ေလးေလ့လာရေA ာင္ (A ပိုင္း-၆)
Absolute URLs ဆုိတာ ?
Absolute Uniform Resource Locator (Absolute URLs) ဆုိတာ ကေတာ့ Web Site တစ္ခုရဲ႕ Address
A ျပည့္A စုံကုိေဖာ္ျပတဲ့ URL ကုိ ေခၚတာပါ.. UပမာA ေနနဲ႕ http://www.padonma.com/forum/index.html ဆုိတာ
Absolute URL ပါပဲ.. ဒီေနရာမွာ Absolute URL ကုိA ေသးစိတ္ထပ္ၿပီး ႐ွင္းမယ္ဆုိရင္ (ပုံ-၅.၄၀)
A တုိင္းေတြ႕ရမွာျဖစ္ပါတယ္..
38
(ပုံ-၅.၄၀)
(၁) http:
Hypertext Transfer Protocol ကုိA သုံးျပဳမည္ဟု Browser ကုိA သိေပးျခင္းျဖစ္သည္..
(၂) //
က်ေနာ္တုိ႕ Access လုပ္မယ့္ Source က Contents ေတြသည္ Tree Structure( Hierarchically )
A ရတည္ေဆာက္ထားေၾကာင္း Forward Slash (//) ၂ ခုနဲ႕ကုိယ္စားျပဳထားျခင္းျဖစ္ပါတယ္..
(၃) www
www ဆုိတာကေတာ့ Alias (သုိ႕မဟုတ္) Subdomain (သုိ႕မဟုတ္) ဆာဗာA တြင္းမွာ႐ွိတဲ့ Directory ေနရာတစ္ခုရဲ႕
Shortcut ပါပဲ.. (ပုံ-၅.၄၁) မွာ ႐ွင္းလင္းခ်က္ကုိၾကည့္ႏုိင္ပါတယ္..
(၄) padonma.com
Non-profit Corporation ျဖစ္တဲ့ ICANN( Internet Corporation for Assigned Names and Numbers)
A ဖြဲ႕A စည္းဆီမွာ Registered လုပ္ထားတဲ့ TLD Domain Name ပဲျဖစ္ပါတယ္.. ( .com ဆုိတာကေတာ့ Top Level
Domain A မ်ိဳးA စားျဖစ္ၿပီး Commercial ရဲ႕A တုိေကာက္စာလုံးျဖစ္ ပါတယ္.. ) နမူနာA ေနနဲ႕ ျမန္မာႏုိင္ငံရဲ႕ Domain
System ကုိ (ပုံ-၅.၄၁) နဲ႕ (ပုံ-၅.၄၂) မွာ ဗဟုသုတA ေနနဲ႕ ၾကည့္ႏုိင္ပါတယ္..
(၅) /forum/
Forward Slash (/) မ်ားသည္ Directory တစ္ခုျဖစ္ေၾကာင္းေဖာ္ညြန္း ၿပီး forum ဆုိသည့္ Directory
သုိ႕ညႊန္ျပထားျခင္းျဖစ္သည္.. ကနUီးပုိင္းကာလမ်ားဆီက A င္တာနက္ကုိ Unix Operating System မ်ားျဖင့္ Run
ထားေသာကြန္ပ်ဴတာမ်ားကုိA သုံးျပဳခဲ့ေသာေၾကာင့္ Unix စနစ္၏ Directory Structure နည္းUပေဒမ်ားA တုိင္း
ဖြဲ႕စည္းျပင္ဆင္ေဆာင္ရြက္ထား ျခင္းျဖစ္သည္..
(၆) index.html
Page (သုိ႕မဟုတ္) Contents တစ္ခုျဖစ္ၿပီး URL ၏ေနာက္ဆုံးA ပုိင္း တြင္ ေဖာ္ျပပါ႐ွိသည့္A ညႊန္းမွာ မိမိA လုိ႐ွိေသာ
Contents A မည္ကုိ ေဖာ္ျပယူျခင္းျဖစ္သည္..
39
(၇) :80
ကြန္ပ်ဴတာတစ္လုံးတြင္ Net A သုံးျပဳသည့္ Application မ်ားတြင္ သတ္ဆုိင္ရာ Port Number မ်ား႐ွိၿပီး.. 80 (သုိ႕) 8080
နံပါတ္A ား Server ကုိထိန္းခ်ဳပ္သည့္ Administrator မ်ားမွ HTTP A တြက္ A မ်ားဆုံးသတ္မွတ္ေပးၾကပါတယ္..
(၈) 203.11.12.33
Internet Protocol (IP) Address ျဖစ္ၿပီး padonma.com Website A ားထား႐ွိသည့္ Server ၏ လိပ္စာျဖစ္ပါတယ္..
Website ကုိA သုံးျပဳမယ့္ Visitor ေတြA ေနနဲ႕ IP Address ကုိA သုံးျပဳရျခင္းဟာ မွတ္မိရန္ခက္ၿပီး လွပမႈမ႐ွိေသာေၾကာင့္
IP Address ကုိ Domain Name ျဖင့္ ဖလွယ္ေပးႏုိင္ရင္ ICANN A ဖြဲ႕မွေဆာင္ရြက္ေပး ပါတယ္..
padonma.com<=>203.11.12.33 ဆုိၿပီး DNS (Domain Name Server ) ေတြက A ျပန္A လွန္ Translate
လုပ္ေပးပါတယ္.. http://www.bagan.net.mm URL ကုိဖြင့္ၾကည့္တဲ့ Visitor A တြက္ Bagan Webpage
A ားျပေပးႏုိင္ရန္ DNS Server မ်ားမွA ဆင့္ဆင့္A လုပ္လုပ္ေပးပုံကုိ (ပုံ-၅.၄၂) မွာ ဗဟုသုတA ေနနဲ႕ေလ့လာႏုိင္ပါတယ္..
(၉) music.padonma.com/
music ဆုိတာကေတာ့ Alias (သုိ႕မဟုတ္) Subdomain (သုိ႕မဟုတ္) ဆာဗာA တြင္းမွာ႐ွိတဲ့ Directory ေနရာတစ္ခုရဲ႕
Shortcut ပါပဲ.. ဆုိလုိတာက http://www.padonma.com/music ဆုိတဲ့ Directory ကုိ Alias A ေနနဲ႕ Shortcut
လုပ္ထားျခင္းျဖစ္ပါတယ္..(ပုံ-၅.၄၁) မွာ ရွင္းလင္းခ်က္ကုိ ၾကည့္ႏုိင္ပါတယ္..
(ပုံ-၅.၄၁)
40
(ပုံ-၅.၄၂)
Reduced: 97% of original size [ 738 x 226 ] - Click to view full image
41
(ပုံ-၅.၄၃)
Relative နဲ႕ Absolute ကုိသေဘာေပါက္ၿပီဆုိရင္ HTML Elements ေတြဘက္ ျပန္လွည့္ရေA ာင္..
<blockquote></blockquote> ဆုိတာကေတာ့ Website ေတြမွာ Paragraph တစ္ခုA တြင္းတစ္ခုခုကုိ Quote
A ေနနဲ႕ေရးခ်င္တဲ့A ခါမွာ သုံးပါတယ္..Uပမာ (ပုံ-၅.၄၄) ကပုံစံမ်ိဳးေရးခ်င္ရင္ေပါ့..
(ပုံ-၅.၄၄)
<pre></pre> ဆုိတာကေတာ့ Website ေတြမွာ ကုိယ္လုိခ်င္တဲ့ Format နဲ႕ Word Processor တစ္ခုမွာေရးရသလုိ
ေနရာခ်ၿပီးေရးခ်င္ရင္ သုံးပါတယ္.. Preformated Text ဆုိတဲ့စကားလုံးA တုိေကာက္ပါ.. UပမာA ေနနဲ႕..
42
Browser မွာဆုိ Tab ေတြ Enter Key ေတြနဲ႕ Whitespace ေတြလုပ္ထားေပမယ့္ ကုိယ္လုပ္ထားတဲ့A တုိင္း (ပုံ-၅.၄၅)
မွာျပေပးပါတယ္..
(ပုံ-၅.၄၅)
 ဆုိတာကေတာ့ Website ေတြမွာ Formula လိုမ်ိဳး မွာထပ္ကိန္းေတေြ ရးရင္.. Footnote
လုိရည္ညႊန္းခ်က္ေတြေရးခ်င္ရင္ သုံးပါတယ္.. Superscript ရဲ႕A တုိေကာက္စာလုံးပါ.. Uပမာ..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၄၆) A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၄၆)
 ဆုိတာကေတာ့ Website ေတြမွာ H2O Formula လုိမ်ိဳးေတြေရးခ်င္ရင္ သုံးပါတယ္.. Suberscript
ရဲ႕A တုိေကာက္စာလုံးပါ.. Uပမာ..
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၄၇) A တုိင္းျမင္ရပါမယ္..
43
(ပုံ-၅.၄၇)
================================================================
================
ဒီပုိ႕စ္မွာေတာ့ HTML မွာ Special Characters ေတြA သုံးျပဳပုံကုိေလ့လာရ ေA ာင္..
တကယ္ေတာ့ Webpage ေတြမွာ က်ေနာ္တုိ႕ ႐ုိက္ေနတဲ့ Keyboard ေပၚမွာမပါတဲ့ Special Charactor
ေတြလည္းေရးလုိ႕ရပါတယ္.. ISO-8859-1 (Latin-1) Character Set A ရ စာလုံးေပါင္း ၂၅၆ လုံးပါ၀င္ပါတယ္.. A ဲ့ဒီ ၂၅၆
လုံးထဲမွာ ကီးဘုတ္ေပၚမွာပါတဲ့စာလုံးမ်ား၊ A သုံးမျပဳေသးတဲ့ေနရာလြတ္မ်ား နဲ႕ (Special Characters)
A ထူးစာလုံးမ်ားဆုိၿပီးA ားလုံးေပါင္းစပ္ပါ၀င္ေနပါတယ္. ၂၅၆ လုံးမွာ ၁၉၅ လုံးကေတာ့ (Special Characters)
A ထူးစားလုံးမ်ားျဖစ္ပါ တယ္.. A ထူးစာလုံးဆုိတာေတြကေတာ့ ®, ©,™ လုိစာလုံးေတြကုိေျပာတာပါ.
ေရးတဲ့ေနရာမွာလည္း (ပုံ-၅.၄၈) လုိပဲ Numeric Form နဲ႕ Named Form ဆုိၿပီး (၂) မ်ိဳးေရးလုိ႕ရပါတယ္..
(ပုံ-၅.၄၈)
UပမာA ေနနဲက Copyright Symbol ကုိ Webpage ထဲမွာထည့္ၾကည့္ရေA ာင္.
44
Browser ေပၚမွာ ဆုိ (ပုံ-၅.၄၉)A တုိင္းျမင္ရပါမယ္..
(ပုံ-၅.၄၉)
A ကယ္လုိ႕ &copy; ဆုိတဲ့ေနရာမွာ Numeric Format နဲ႕ © လုိ႕ေရးမယ္ဆုိရင္လည္းA တူတူပဲျဖစ္ပါတယ္.. © ဆုိတဲ့
Symbol ကုိ Copyright စာလုံးရဲ႕A ေ႐ွ႕(သုိ႕) A ေနာက္မွာထည့္ရပါတယ္..
ေနာက္တစ္ခု Special Character ေတြကုိမျဖစ္မေနသုံးရတဲ့ေနရာေတြ႐ွိပါတယ္ Uပမာ.. HTML Code ေတြကုိ HTML
Page ထဲမွာျပခ်င္တဲ့A ခါမွာ Special Character ေတြကုိသုံးရပါေတာ့တယ္.. Uပမာ (ပုံ-၅.၅၀)မွာလုိ HTML Code
ေတြကုိေပၚေစဖုိ႕A တြက္ (ပုံ-၅.၅၁)A တုိင္း < နဲ႕ > ကုိ Named Form ျဖစ္တဲ့ &lt; နဲ႕ &gt; ကုိA စားထုိးၿပီးေရးရပါတယ္..
< > ေတြကုိ တုိက္ရုိက္ HTML Code ထဲကုိထည့္ေရးမယ္ဆုိ HTML Code ႏွစ္ခုထပ္ၿပီး Webpage ထဲမွာေနာက္
Webpage ထပ္ခုထပ္ၿပီး၀င္သြားတာပဲျဖစ္မွာပါ..
45
(ပုံ-၅.၅၀)
က်ေနာ္ Dialogue Box ေလးေတြနဲ႕ျပထားတာက < နဲ႕ > ေနာက္ကြယ္မွာေရးထားတဲ့ Code
ဘယ္လုိ႐ွိလည္းဆုိတာျဖစ္ပါတယ္..A ခုေနာက္ကြယ္က HTML Code ကုိၾကည့္ရေA ာင္..
(ပုံ-၅.၅၁)
< နဲ႕ > လုိ Character ေတြကုိ Reserved Characters လုိေခၚၿပီး A ထက္မွာျပခဲ့တဲ့ Uပမာလုိ.. HTML Code ေတြကုိ
HTML Page A ေပၚမွာ Source Code A ေနနဲ႕ျပခ်င္တဲ့A ခါမွာသုံးရပါတယ္.. Reserved Characters, Unused
Characters ႏွင့္ Used Characters မ်ားကိုေA ာက္ပါဇယားမ်ားတငြ ္ ေဖာ္ျပထားပါတယ္..
46
47
48
49
HTML ေလးေလ့လာရေA ာင္ (A ပိုင္း-၇)ဇတ္သိမ္းပိုင္း
HTML Document A မ်ိဳးA စားေတြဆုိတာ ?
က်ေနာ္တုိ႕ A ခုေလ့လာေနတဲ့ HTML Version က Version 4.01 ျဖစ္ၿပီး က်ေနာ္တုိ႕ေရးသားတဲ့ HTML Page
တုိင္းရဲ႕A ေပၚဆုံးေနရာမွာ HTML Document Type A မ်ိဳးA စား ေၾကညာေပးျခင္း (သုိ႕) DocType decleration
လုပ္ေပးဖုိ႕ လုိပါတယ္.. ဒါမွသာ Web Browser က ကုိယ္ေရးလုိက္တဲ့ HTML Version နဲ႕ ေရးသားတဲ့ပုံစံ
( Conformance ) A ဆင့္ကုိသိ႐ွိၿပီး မွန္မွန္ကန္ကန္ A လုပ္လုပ္ေပးႏုိင္မွာပါ.. HTML 4.01 A တြက္
ဒီဇုိင္းထုတ္ထားတဲ့ Convformance Level A ေနနဲ႕ကေတာ့ (၁) Strict (၂) Transitional နဲ႕ (၃) Frameset ဆုိၿပီး
Level (၃)ခု႐ွိပါတယ္.. A ေသးစိတ္A ဓိပၸါယ္႐ွင္းလင္းခ်က္ကုိ ေA ာက္မွာေရးသားထားပါတယ္..
50
Strict Conformance ဆုိတာ ?
Strict conformance HTML verson 4.01 ဆုိၿပီးသတ္မွတ္လုိက္တဲ့ HTML Page တစ္ခုမွာဆုိရင္ Deprecated Elements
ေတြနဲ႕ Attribute ေတြကုိ လက္မခံပါဘူး.. Frameset Elements ေတြလည္းပါ၀င္လုိ႕မရပါဘူး.. ဒီေနရာမွာ Deprecated
Elements ဆုိတာဘာလည္းဆုိတာ႐ွင္းျပခ်င္ပါတယ္.. က်ေနာ္A ရင္ပုိ႕စ္ေတြတုန္းကေျပာခဲ့သလုိပါပဲ.. ကုမၸဏီမ်ိဳးစုံ
A ဖြဲ႕A စည္းမ်ိဳးစုံ ကေန Browser မ်ိဳးစုံမွာ Standard သတ္မွတ္ခ်က္ကုိ ဂ႐ုမမူဘဲ HTML Elements
မ်ိဳးစုံကုိA သုံးျပဳခဲ့ၾကပါတယ္.. Uပမာ- <i> <em> လုိ Elements ေတြဟာ လုပ္ေဆာင္ပုံခ်င္းတူေပမယ့္
ေရးသားတဲ့ပုံစံမ်ိဳးစုံကြဲေနတာကုိေတြ႕ရ မွာပါ.. ဒီေတာ့ HTML Version 4.01 Standard မွာေတာ့ တစ္ခ်ိဳ႕ Standard
မက်တဲ့ Elements ေတြကုိ (Deprecated Elements) ကန္႕ကြက္ထားတဲ့ Elements ေတြA ေနနဲ႕ ခြဲထုတ္ထားပါတယ္..
ဘာျဖစ္လုိ႕လည္းဆုိေတာ့ တစ္ခ်ိဳ႕ Deprecated Elements ေတြဟာ ေနာက္ဆုံးထြက္လာတဲ့ Feature ေတြနဲ႕မကုိက္ညီဘဲ
Performance ကုိက်ေစတာမ်ိဳးျဖစ္ေစတတ္လုိ႕ပါ. ကုိယ္ေရးလုိက္တဲ့ Webpage ကုိ Strict Conformance
A ေနနဲ႕သတ္မွတ္ မယ္ဆုိရင္ ၄င္း Webpage ရဲ႕ A ေပၚဆုံးမွာ ေA ာက္ပါA တုိင္းထည့္သြင္း ေၾကညာေပးရပါမယ္..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional Conformance ဆုိတာ ?
Transitional conformance မွာေတာ့ Deprecated Elements နဲ႕ Attribute ေတြကုိလက္ခံပါတယ္.. Frameset
Elements ေတြေတာ့မရပါဘူး.. Deprecated Elements ကုိUပမာျပရရင္ <font>, <basefont>, <center>
ဆုိတာမ်ိဳးေတြပဲျဖစ္ပါတယ္.. Attribute A ေနနဲ႕ဆုိရင္ align ဟာ Table ေတြမွာA သုံးျပဳတာကလြဲရင္ က်န္တဲ့ေနရာ
ေတြမွာ Deprecated Attribute A ေနနဲ႕သတ္မွတ္ထားပါတယ္.. ကုိယ္ေရးလုိက္တဲ့ Webpage ကုိ Transitional
Conformance A ေနနဲ႕သတ္မွတ္ မယ္ဆုိရင္ ၄င္း Webpage ရဲ႕ A ေပၚဆုံးမွာ ေA ာက္ပါ A တုိင္းထည့္သြင္း
ေၾကညာေပးရပါမယ္..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
တစ္ခုမွတ္သားထားရမွာက HTML 4.01 က သတ္မွတ္ထားတဲ့ Deprecated Conformance ဟာ A ရင္ HTML Version
A ေဟာင္းေတြမွာေတာ့ ဘာမွသက္ေရာက္မႈမ႐ွိပါဘူး.. A ခုလုိ HTML Version 4.01 မွာ Conformance ကုိ Level (၃)
ခုခြဲရတဲ့ရည္ရြယ္ခ်က္ကေတာ့ ႐ွိခဲ့ၿပီးသား HTML & Browser Old Version ေတြနဲ႕ပါကုိက္ေA ာင္ .. Backward
Compatibility ျဖစ္ေA ာင္ လုပ္ေပးခ်င္လုိ႕ပါပဲ.. ဒီေတာ့ HTML Version 4.01 မွာ Conformance
ကုိမွန္ကန္ေA ာင္ေၾကညာၿပီးတာနဲ႕ မိမိစိတ္ႀကိဳက္ Version A ေဟာင္းေရာ A သစ္ပါေရာၿပီးေရးႏုိင္တာက Level
ခြဲလုိက္ျခင္းရဲ႕ A က်ိဳးေက်းဇူးပါပဲ..
Frameset Conformance ဆုိတာ ?
Frameset conformance မွာေတာ့ Deprecated Elements & Attributes ေရာ Frameset Elements
ေတြကုိပါလက္ခံပါတယ္.. Frame ေတြနဲ႕ေရးသားတဲ့ Webpage ေတြမွာပဲ သုံးပါတယ္.. Frameset Elements
ေတြကေတာ့ <frameset>, <frame>, <noframes> တုိ႕ပဲျဖစ္ပါတယ္.. Frame ကုိA သုံးျပဳတဲ့ Webpage
နမူနာကုိေနာက္ပုိ႕စ္ေတြမွာ ျပသာြ းပါမယ္.. သ႕ူ ကိုေၾကညာတဲ့ပုံစံကေတာ့ ေA ာက္ပါA တိုင္းျဖစ္ပါတယ္..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
51
"http://www.w3.org/TR/html4/frameset.dtd">
A ထက္မွာေရးသြားတဲ့ Conformance ေတြကုိ ပုိၿပီး႐ွင္းေA ာင္ (ပုံ-၅.၅၂) မွာထပ္ၿပီးေလ့လာႏုိင္ပါတယ္.. Webpage
တစ္ခုကုိ View Source နဲ႕ၾကည့္မယ္ဆုိရင္ က်ေနာ္႐ွင္းျပခဲ့တဲ့ Level (၃) ထဲက DocType Decleration တစ္ခုကုိ Source
Code ေတြရဲ႕A ေပၚတုိင္းမွာေတြ႕ရမွာျဖစ္ပါတယ္..
(ပုံ-၅.၅၂)