HTML မိတ်ဆက်

Wikipedia မှ
ဤနေရာသို့သွားရန် - အ​ညွှန်း​, ရှာ​ဖွေ​ရန်​

ယနေ့အခါမှာ Internet ဟာအလွန်ကျယ်ပြန့်လာပြီး လူတိုင်းနီးပါးအသုံးပြုကြပေသည်။ ကျွန်တော်တို့တွေဟာလည်း Internet ပေါ်မှာ ကိုယ်ပိုင်နေရာများကို ကိုယ်ပိုင် Homepage များကို အလွယ်တကူ ယူဆောင်နိုင်လေပြီ။ Internet ဆိုတာကို အကျယ်ရှင်းမနေတော့ပါဘူး။ အလွယ်ရှင်းရရင်တော့ Internet ဆိုတာ ကမ္ဘာ ပေါ်ရှိ နိုင်ငံအချင်းချင်း ချိတ်ဆက်ထားသော Network ကွန်ယက်ကြီးတစ်ခုဖြစ်ပါသည်။ အဲဒီလို Information တွေ ဖလှယ်ဖို့အတွက် Web Page တွေကို ရေးဆွဲရပါတယ်။ Web Page ရေးဆွဲဖို့ရာအတွက် HTML ဟာ အဓိက ကျပါတယ်။ ရေးသားထားတဲ့ Web Page တွေကို Web Browser Software နဲ့ ကြည့်ရှုရပါတယ်။ Web Broswer Software တွေက Internet Explorer နဲ့ Firefox တို့က နာမည်ကြီးတွေပါ။ HTML History 1989 ခုက Tim Berners-Lee နဲ့ Rober Calliau ဟာ Research Documents တွေကို ပိုမိုမြန်ဆန်ကောင်းမွန် မယ့် နည်းလမ်းကို ရှာဖွေခဲ့ပါတယ်။ ၂ နှစ် လောက်ကြာတော့ Berners-Lee ဟာ browser တွေက ကြည့်ရှုဖတ်သားနိုင်ပြီး Tag များနှင့် ဖွဲ့စည်းတည်ဆောက်ထားတဲ့ နည်းပညာတစ်ခုကို ပြုလုပ်နိုင်ခဲ့ပါတယ်။ ထို့နောက်အဲဒီ tage တွေထဲမှာ Hyper-Link နဲ့ document အချင်းချင်းချိတ်ဆက်နိုင်တဲ့ tag တွေပါထည့်သွင်းနိုင်ခဲ့ပါသည်။ Berners-Lee ရဲ့ နည်းပညာကို Hyber Text Markup Language ဆိုတဲ့ HTML ပါပဲ။ Tag ဆိုတာဘာလဲ Tag ဆိုတာကတော့ ရိုးရိုး Text တွေနဲ့ HTML code တွေကို ခွဲခြားလို့ရအောင်လုပ်ထားတာပါ။ ဘယ်လိုမျိုးလဲဆိုရင်တော့ This is bold ဆိုရင် web browser နဲ့ ကြည့်ရင် စာလုံးဟာ bold ဖြစ်နေပါလိမ့်မယ်။ အဲဒီမှာ နဲ့ တို့ဟာ tag တွေပါ။ အများအားဖြင့် tag တွေဟာ အဖွင့် နဲ့ အပိတ်ပါ ပါတယ်။ အပိတ်ဆိုရင် / လေးခံထားပေးရပါတယ်။ HTML အတွက် Editor HTML အတွက် Editor တွေ IDE တွေအများကြီးရှိပါတယ်။ ကျွန်တော်ကတော့ Dreamweaver အကြိုက်ဆုံးပါပဲ။ သူက HTML မတတ်ရင်တောင် Website တစ်ခုဆွဲလို့ရပါတယ်။ ဒါပေမယ့် Dreamweaver ကိုသုံးရင်တော့ HTML code တွေသိလာမှာ မဟုတ်သလို တခြား website တွေကို ပြင်ရတာလည်းခက်ပါလိမ့်မယ်။ ကျွန်တော်တို့တွေ သူများတွေပေးထားတဲ့ website template ကိုပြင်ချင်တယ်။ ကိုယ်ပိုင်သေသေချာချာ HTML code တွေကိုသိချင်တယ်။ ဒါဆိုရင်တော့ လေ့လာကာစမှာ Notepad သုံးပြီးလေ့လာပါ။ လေ့ကျင့်ပါ။ HTML က web site ဆွဲရတဲ့ အထဲမှာ အလွယ်ဆုံးနဲ့ အခြေခံအကျဆုံးပဲ။ သူ့ကိုသေသေချာချာနားလည်ထားမှ တခြား web programming တွေဖြစ်တဲ့ PHP, ASP.NET , JSP , Ruy On Rail တို့မှာ အထောက်အကူဖြစ်မှာပါ။ HTML For Web Design Suit HTML မိတ်ဆက်

HTML ကိုလေ့လာမယ် 1.Starting To Creat and Edit Webpage Notepad ဖြင့်စတင်ခြင်း ၁. Windows Key + R ကို နှိပ်လိုက်ပါ။ Run Dailog Box တက်လာပါမည်။ ထို့နောက် notepad လို့ရိုက်လိုက်ပါ။ ပြီးလျှင် OK ကို နှိပ်လိုက်ပါ။ ဒါဆိုရင် notepad တက်လာပါလိမ့်မယ်။ ၂. Notepad ထဲတွင် Format အောက်က word warp ကို check လုပ်ထားပါ ။ ဘာဖြစ်လို့လည်းဆိုရင်တော့ Word Warp က Notepad မှာစာရိုက်တာ ပြည့်သွားရင် အောက်တစ်ကြောင်း ဆင်းသွားရန်အတွက် ဖြစ်သည်။ HTML စတင်ရေးသားခြင်း ၁. Notepad ထဲတွင် အခုလိုရေးသားလိုက်ပါ။ <html> <head> <ti tle>This is title</title> </head> <body> This is body </body> </html> HTML နဲ့ စပြီး HTML နဲ့ပြန်ပိတ်ရပါတယ်။ အဲဒီကြားမှာ html code တွေရေးရပါတယ်။ Head Tag နဲ့ Head Tag အပိတ်ကြားတွင် Title ထည့်ထားသည်ကို တွေ့ရမည်။ Title သည် Browser ၏ ထိပ် bar တွင် တွေ့မြင်ရန်ဖြစ်သည်။ Body အဖွင့် နဲ့ အပိတ်ကြားမှာ မိမိ၏ နှစ်သက်ရာ စာများရေးသားနိုင်သည် ။

HTML For Web Design Suit HTML ကိုလေ့လာမယ် ၂. အဲဒါကို တနေရာ မှာ save သွင်းလိုက်ပါ။ Save Dialog box တက်လာရင် filetype ကို All file လို့ပေးလိုက်ပါ။ file name ကို firstrun.html လို့ပေးလိုက်ပါ။ firstrun သည် မိမိ၏ နှစ်သက်ရာ နာမည်ပေးနိုင်သည်။ .html သည် file extension ဖြစ်သည်။ HTML ရေးထားသော page များကို .html နှင့် .htm လို့ပေးမှသာ browser တွင် ပေါ်ပါလိမ့်မည်။ ၃. Save သွင်းလိုက်သော file လမ်းကြောင်းကို သွားလိုက်ပါ ။ first.html file လေးကို double click လုပ်ပြီး ဖွင့်လိုက်ပါ ။ ဒါဆို page လေးတစ်ခုတက်လာတာကို မြင်ရပါမယ်။ ထိပ်ပိုင်းတွင် File ပတ်လမ်းကြောင်းကို address bar တွင်တွေ့ရမည်ဖြစ်သည်။ title tag ထဲတွင် ရေးထားသော This is tile ဆိုသော စာကို Windos ၏ Title bar နှင့် Tab Title bar တို့တွင် တွေ့ရမည်။ Body tag ထဲတွင် ရေးထားသော This is body ဆိုသော စာသားကို စာမျက်နှာအဖြူပေါ်တွင် ပေါ်နေသည်ကို တွေ့ရမည်ဖြစ်သည်။ ပြင်မယ်ဆိုရင်တော့ IE7 မှာဆိုရင် Page > View Source ကိုနှိပ်လိုက်ပါက Notepad နဲ့ ကိုယ်ရေးထားတဲ့ HTML ပွင့်လာပါမယ်။ IE 6 မှာဆိရင် View > Source ကို နှိပ်လိုက်ပါက Notepad နဲ့ ကိုယ်ရေးထားတဲ့ HTML ပွင့်လာပါမယ်။ အဲဒီမှာ ရေးထားတဲ့ codeတွေကို ဖတ်နိုင်သလို ကိုယ့်စက်ထဲမှာရေးထားတဲ့ page ဆိုရင်တော့ ပြင်ပြီး တစ်ခါတည်း save လုပ်နိုင်ပါတယ်။ Internet ပေါ်က Web site တွေကိုတော့ view > source ကနေဖွင့်ပြင်ပြီး save လုပ်လို့မရပါဘူး။

HTML For Web Design Suit HTML ကိုလေ့လာမယ် Header Tag notepad ထဲမှာ ဒီလိုရိုက်လိုက်ပါ <html> <head> <ti tle>Example Of Header</title> </head> <body>

မာတိကာ

This is Header[ပြင်​ဆင်​ရန်​]

This is normal text </body> </html> အဲဒီ code လေးကို notepad ထဲမှာထည့်ရေး.. ပြီးတော့ run ကြည့်လိုက်ပါ။ အခုလိုမြင်ရပါလိမ့်မယ်။ Head Tag က h1 ကနေ h6 အထိ ရှိပါတယ်။ နံပါတ်ကြီးလေလေ သေးသွားလေလေပဲ။ h6 ဆိုအသေးဆုံးကို ရောက်သွားပြီ။ ကဲ လက်တွေ့ စမ်းကြည့်ရအောင်။ notepad ထဲမှာ အောက်ကလို ရိုက်ပြီး save လုပ်လိုက်။ ပြီးရင် ဖွင့်ကြည့်လိုက်ရင် တွေ့ရပါလိမ့်မယ်။ <html> <head> <ti tle>Example</title> </head> <body>

H1[ပြင်​ဆင်​ရန်​]

H2[ပြင်​ဆင်​ရန်​]

H3[ပြင်​ဆင်​ရန်​]

H4[ပြင်​ဆင်​ရန်​]

H5[ပြင်​ဆင်​ရန်​]
H6[ပြင်​ဆင်​ရန်​]

</body> </html> အခုဆို html အကြောင်းနည်းနည်း နားလည်လာလောက်ပါပြီ။ တကယ်တန်းတော့ မခက်ပါဘူး။ ဒါကအစပဲ ရှိပါသေးတယ်။ ဒီလောက်လေးနဲ့ပင် စာတွေပဲပါတဲ့ page တစ်ခုရေးလို့ရနေပြီ။ ဒါပေမယ့် လိုအပ်တာတွေ ရှိသေးတာပေါ့။ အခုဆက်ပြီး bold ၊ italic ၊ underline လုပ်ပုံလေးတွေ ဆက်ပြောပါမယ်။ လွယ်ပါတယ်။

HTML For Web Design Suit HTML ကိုလေ့လာမယ် Line Break HTML မှာ စာတစ်ကြောင်းဆင်းချင်ရင်တော့
ကိုသုံးပါတယ်။ သူ့မှာ close tag မပါဘူး။
ပဲရေးရေး
ပဲရေးရေးရပါတယ်။ <html> <head> <ti tle>Example</title> </head> <body> First Line
S econd Line
Third Line </body> </html> Bold ၊ Italic ၊ Underline Tag bold မို့လို့ ကျွန်တော်တို့တွေ ကိုသုံးပါမယ်။ နောက်ပြီး italic မို့လို့ ပေါ့။ ဒါဆိုရင် Underline ကဘာလဲဆိုရင် သိပြီးသားလောက်ပါ။ ကျွန်တော်တို့တွေ ကိုသုံးပါမယ်။ အဲဒါကို notepad ထဲမှာ ဒီလိုရေးပြီး run လိုက်ရင်ရပါတယ်။ <html> <body> This is bold
This is italic
This is underline
</body> </html> Bold လုပ်မယ်။ နောက်ပြီး အဲဒါကို underline သားမယ်။ ဒါမှ မဟုတ် italic လုပ်မယ်။ အဲလိုမျိုးလုပ်ချင်တယ်။ ရပါတယ်။ tag တွေထဲမှာ tag တွေထည့်လိုက်ပေါ့။ ဒီလိုထည့်လို့ရပါတယ်။ This is bold italic This is bold italic အဲလိုမျိုးရေးလို့ရပါတယ်။ တချို့လူတွေက မေးတတ်တယ်။ HTML For Web Design Suit HTML ကိုလေ့လာမယ် နဲ့စမှ ရမှာလား။ ဒီလိုတိုင်း အစဉ်တိုင်းရေးမှ ရမှာလား။ နောက်ပြီး အဲလိုမျိုးတွေကော ပိတ်လို့မရဘူးလား။ ဘာနဲ့ စစရပါတယ်။ အစဉ်တိုင်းမဟုတ်ပဲ This is bold italic လို့ရေးလည်းဖြစ်ပါတယ်။ နောက်ပြီး tag အဖွင့်တွေ အပိတ်တွေက ကြိုက်သလိုဖြစ်နေလို့ရပါတယ်။ ဒါပေမယ့် structure ကျကျလေး။ ပုံစံကျကျလေး ဖြစ်နေရင်ကောင်းတာပေါ့။ နောက်မို့ဆို code ကိုပြန်ဖတ်ရခက်တာပေါ့။ Pre Tag

ကျွန်တော်တို့တွေ စာတစ်ကြောင်းဆင်းရမှာ မကြိုက်ဘူး။ Enter ခေါက်လိုက်ရုံနဲ့တင် တစ်ကြောင်းဆင်းချင်တယ်။ အလွယ်ဆုံး နည်းလမ်းကတော့ dream weaver သုံးလိုက်ခြင်းပဲ။ အဲဒါဆိုရင်တော့ HTML နားလည်မှာမဟုတ်တော့ဘူး။ နောက်တစ်နည်းကတော့

 ပါ။ ဒါပေမယ့် သူက font ပုံစံပြောင်းသွားတယ်။ အဲဒါက ကိစ္စ မရှိပါဘူး။ နောက်ပိုင်း font တွေဘယ်လိုပြောင်းရလဲ ဆိုတာသိလာရင် လာပြင်လိုက်လို့ရပါတယ်။ နောက်ပြီး <pre> မှာ သူက tab ခေါက်ထားတာတွေ အစသိပါတယ်။
<html>
<head>
<ti
tle>Example</title>
</head>
<body>
<pre>Pre Tag, Now Enter
Now Tab Tab

</body> </html> Paragraph Tag

ကျွန်တော်တို့တွေ စာတွေကို paragraph ပုံစံရေးချင်တယ်။ စာပိုဒ်တွေနဲ့ ရေးမယ်ပေါ့။ ဒါဆိုရင်

ကိုသုံးလို့ရပါတယ်။ သူက အပိတ် tag မပါလည်းရပါတယ်။ ထည့်ရင်တော့ ပိုကောင်းတာပေါ့။ <html> <head> <title>Example</title> </head> <body>

About Notepad[ပြင်​ဆင်​ရန်​]

Notepad is a basic text editing program and it is most commonly used to view or edit text files. A HTML For Web Design Suit HTML ကိုလေ့လာမယ် text file is a file type typically identified by the .txt file name extension.

How do I change the font style and size?

Changes to the font style and size affect all the text in the document.
Click the Format menu, and then click Font.
Make your selections in the Font, Font style, and Size boxes.
An example of how your font will look appears under Sample.
When you are finished making font selections, click OK.

</body> </html> Horizonal Line

ကျွန်တော်တို့တွေ horizonal မျဉ်းသားချင်တဲ့ အခါမှာ သုံးလို့ရပါတယ်။ သုံးပုံသုံးနည်းကတော့


ပါပဲ။ close tag မပါပါဘူး။

<html> <head> <title>Example</title> </head> <body>

About Notepad[ပြင်​ဆင်​ရန်​]

Notepad is a basic text editing program and it is most commonly used to view or edit text files. A text file is a file type typically identified by the .txt file name extension.


How do I change the font style and size?[ပြင်​ဆင်​ရန်​]

Changes to the font style and size affect all the text in the document.
HTML For Web Design Suit HTML ကိုလေ့လာမယ် Click the Format menu, and then click Font.
Make your selections in the Font, Font style, and Size boxes.
An example of how your font will look appears under Sample.
When you are finished making font selections, click OK.

</body> </html>

အထက်ပါ code ကို run လိုက်ရင် ဒီလိုမြင်ရမယ်။ အဲမှာ


ထည့်ထားတဲ့နေရာက line လေးတားထားတာကို မြင်ရပါလိမ့်မယ်။

Attribue ကျွန်တော်တို့တွေဟာ tag တွေမှာလည်း attribute တွေထည့်ပြီး သုံးနိုင်ပါတယ်။ attribute ဆိုတာကတော့ အဲဒီ tag ပိုင်ဆိုင်တဲ့ properties ပေါ့။ tag တိုင်းမှာတော့ attribute မရှိပါဘူး။ အခု ဦးစွာ အရင်ဆုံး body မှာပါတဲ့ color attribute အကြောင်းလေးနဲ့ စလိုက်ရအောင်။ Body Color <html> <head> <title>Example</title> </head> <body bgcolor=silver> Body BGCOLOR </body> </html>

HTML For Web Design Suit HTML ကိုလေ့လာမယ် အဲဒီ code လေးကို run လိုက်ရင်တော့ အရင်ကလို background color က အဖြူရောင်မဟုတ်တော့ပဲ စိမ်းနုရောင်လေးဖြစ်နေတာကို တွေ့ရပါမယ်။ အောက်က Table မှာ အသုံးများတဲ့ color 16 ရောင်နာမည်တွေပါ။ Silver Gray Maroon Green Navy Purple Olive Teal White Black Red Lime Blue Magenta Yellow Cyan ကျွန်တော်တို့တွေဟာ color တွေကို code အနေနဲ့လည်း အသုံးပြုနိုင်ပါတယ်။ သုံးရမှာကတော့ RGB color ပါ။ Hex code number ကိုအသုံးပြုရပါတယ်။ #FF0000 ဆိုရင်တော့အနီရောင်ပါ။ ရှေ့ဆုံး ၂ လုံးက အနီရောင်ဖြစ်ပြီး အလယ် ၂ လုံးက အစိမ်းရောင်ပါ။ နောက်ဆုံး ၂လုံးကတော့ အပြာရောင်ပေါ့။ အဲဒီ အရောင် ၃ရောင်ကို စပ်ပြီး သုံးရပါတယ်။ တကယ်လို့ color တွေကို မသိဘူးဆိုရင် photoshop ကနေလည်း ကြိုက်နှစ်သက်တဲ့ အရောင်ကို ယူပြီးသုံးနိုင်ပါတယ်။ ဘယ်လိုယူရမလဲဆိုရင်တော့ အရင်ဆုံး photoshop ကိုဖွင့်လိုက်။ ဘယ်ဘက် အောက်နားမှာ color ရွေးဖို့လေးပါတယ်။ အဲဒါလေးကို double click လုပ်လိုက်ပါ။ color dialog box တက်လာပါမယ်။ ပြီးရင် နှစ်သက်ရာ အရောင်ရွေးပါ။ color အရောင်ရွေးပြီးရင် အောက်နားမှာ hex code လေးကို copy ကူးလိုက်ရုံပါပဲ။ ကျွန်တော်တို့တွေ color အနေနဲ့သုံးချင်ရင် # လေးကို ရှေ့မှာ ခံပြီးသုံးလိုက်ရုံပါပဲ။ <html> <head> <title>Example</title> </head> <body bgcolor=#e5bb2c> Body BGCOLOR Hex code </body> </html>

အခုဆိုရင်တော့ attribute ပိုင်း နဲ့ color ပိုင်းလေးကို နည်းနည်းပါးပါးသိလောက်ပြီလို့ထင်ပါတယ်။ attribute ထည့်လို့ရတဲ့ tag တွေကလည်း အများကြီးရှိပါသေးတယ်။ ဖြည်းဖြည်းခြင်း ပြောပြသွားမယ်။ အခု နောက်ထပ် tag တစ်ခုဖြစ်တဲ့


ရဲ့


HTML For Web Design Suit HTML ကိုလေ့လာမယ်[ပြင်​ဆင်​ရန်​]

attribute အကြောင်းလေးပြောပါမယ်။ Hr Attribute ကျွန်တော်တို့တွေဟာ tag တစ်ခုရဲ့နောက်မှာ attribute တစ်ခုထက်မက လိုက်လို့ရပါတယ်။ tag တွေနောက်မှာ attribute တစ်ခုထက်မကပါတာတွေကို နောက်ပိုင်းမှာတွေ့ရပါလိမ့်မယ်။ အခုတော့ hr အကြောင်းလေး ဆက်ရအောင်။ <html> <head> <title>Example</title> </head> <body bgcolor=#e0e0e0> Default HR


Hr with size=1


Hr with size=5


Hr with size=10


Hr with size=10 and noshade


Hr with size=5 and color


</body> </html> အဲမှာ size ကတော့ အရွယ်အစားပါ။ noshade ဆိုတာကတော့ shade မပါတဲ့ဟာကို ပြောတာပါ။ ဗြောင်ကြီးပေါ့။ color ကတော့ မိမိကြိုက်နှစ်သက်တဲ့အရောင်ထည့်လို့ရပါတယ်။ List List ပိုင်းမှာ order list နဲ့ unorder list ဆိုပြီးရှိပါတယ်။ တနည်းအားဖြင့် နံပါတ်စဉ်နဲ့ list နဲ့ နံပါတ်စဉ်တွေမပါတဲ့ list ပေါ့။ နောက်ပြီး defination list ဆိုတာရှိပါသေးတယ်။ လူသုံးနည်းပါတယ်။ ပထမဆုံး unorder list အကြောင်းလေးသွားရအောင်။ Unorder list HTML For Web Design Suit HTML ကိုလေ့လာမယ် Page 10 <html> <head> <title>Example</title> </head> <body>

Unorder List[ပြင်​ဆင်​ရန်​]

  • First Item
  • Second Item
  • Third Item

</body> </html>

  • က unorder list ပါ။
  • ကတော့ list ပေါ့။ list ၁ ခုပဲဆိုရင်
  • 1
  • ။ ၂ခုဆိုရင်
  • 1
  • 2
  • လို့ရေးပါတယ်။ အပေါ်က code ကို run လိုက်ရင် list လေးတွေကို မြင်ရမှာပါ။ အကုန်လုံးက အဝိုင်းလေးတွေနဲ့ List ပါပဲ။ ကဲ အခု attribute လေးထည့်ပြီး ပုံစံပြောင်းကြည့်ရအောင်။

    <html> <body>

    Unorder List[ပြင်​ဆင်​ရန်​]

    Disc[ပြင်​ဆင်​ရန်​]
    • First Item
    • Second Item
    • Third Item
    Square[ပြင်​ဆင်​ရန်​]
    • First Item
    • Second Item
    • Third Item
    Circle[ပြင်​ဆင်​ရန်​]

    </body> </html> unorder list မှာ disc, square, circle ဆိုပြီး ၃ မျိုးပြောင်းလို့ရပါတယ်။ default ကတော့ disc ပါ။ Ordered List <html> <head> <title>Example</title> </head> <body>

    Ordered List[ပြင်​ဆင်​ရန်​]

    1. First Item
    2. Second Item
    3. Third Item

    </body> </html>

    ကတော့ order list ပါ။ အဲဒီ code လေးကို run လိုက်ရင် နံပါတ် အစဉ်လိုက်ပေါ်လာပါလိမ့်မယ်။ သူ့မှာလည်း attribute တွေရှိပါတယ်။ <html> <head> <title>Example</title> </head> <body>

    Ordered List[ပြင်​ဆင်​ရန်​]

    1. First Item

      HTML For Web Design Suit HTML ကိုလေ့လာမယ်[ပြင်​ဆင်​ရန်​]

    2. Second Item
    3. Third Item
    Type A[ပြင်​ဆင်​ရန်​]
    1. First Item
    2. Second Item
    3. Third Item
    Type a[ပြင်​ဆင်​ရန်​]
    1. First Item
    2. Second Item
    3. Third Item
    Type a[ပြင်​ဆင်​ရန်​]
    1. First Item
    2. Second Item
    3. Third Item
    Type i[ပြင်​ဆင်​ရန်​]
    1. First Item
    2. Second Item
    3. Third Item

    </body> </html> Order List တွင်လည်း Unorder List ကဲ့သို့ပင် type များရှိပါတယ်။ အဲဒါတွေကို အပေါ်က code မှာ ဖော်ပြထားပါတယ်။ order list က unorder list နဲကမတူတဲ့ အချက်ကတော့ နံပါတ်စဉ်လိုက်ဖြစ်ပါတယ်။ မိမိကြိုက်တဲ့ နံပါတ်ကနေ စနိုင်တယ်။ မိမိကြိုက်တဲ့ နံပါတ်ကစနိုင်ဖို့ start ဆိုတဲ့ attribute ကိုသုံးနိုင်ပါတယ်။

    မှာဆိုရင်တော့ D ကနေစမှာပါ။ ဒါဆိုရင်တော့ HTML နဲ့ list တွေပါတဲ့ web page လေးရေးလို့ရပြီပေါ့။ နောက်ထပ် list တစ်ခုကျန်ပါသေးတယ်။ definition list ပါ။

    HTML For Web Design Suit HTML ကိုလေ့လာမယ်[ပြင်​ဆင်​ရန်​]

    Definition List အများအားဖြင့် အဓိပ္ပာယ်ဖွင့်ဆိုချက်တွေမှာ သုံးပါတယ်။ <html> <head><title>Example</title></head> <body>

    Definition List[ပြင်​ဆင်​ရန်​]

    HTML
    Language used to dev elop Web Pages
    I mage
    An y graphic such as an icon,bullet, line, photo , or illustration

    </body> </html>

    Defination List က အခြား List တွေနဲ့ မတူပါဘူး။ သူ့မှာက defination term နဲ့ defination ပါ ပါတယ်။ စရင်တော့ dl နဲက စရပါတယ်။ defination term ကိုတော့
    အသုံးပြုပြီး defination ကိုတော့
    သုံးပါတယ်။ သူက အခြား list နဲ့မတူတဲ့ နောက်တစ်ချက်ကတော့ tag အပိတ်မပါတာပဲ။
    တစ်ခုပဲပါတယ်ဆိုတာကို တွေ့နိုင်ပါတယ်။

    ကဲ... အခုဆိုရင်တော့ HTML ကိုအကြမ်းအားဖြင့်လောက်တော့ သိလောက်ပြီပေါ့။ အခုကျွန်တော်တို့တွေ နောက်ထပ် သေသေချာချာ သိရအောင် နောက်ထပ် တစ်ခန်းသွားရအောင်။

    HTML For Web Design Suit HTML ကိုလေ့လာမယ်[ပြင်​ဆင်​ရန်​]

    Creating Web Page With Apperance And Link

    ကျွန်တော်တို့တွေ အစပိုင်းမှာ bold,italic,underline တို့ကို သိခဲ့ပြီးပါပြီ။ အခု ဒီအခန်းမှာတော့ အရင်ဆုံး font အကြောင်းလေး စပြောပါမယ်။ ကျွန်တော်တို့တွေ font တွေပြောင်းမယ်။ font size တွေပြောင်းမယ်။ စာလုံးတွေမှာ color တွေထည့်မယ်။ အဲဒါတွေကို အပြင် page တစ်ခုနဲ့ တစ်ခု link ချိတ်တာတွေလည်း ပါဝင်မှာပါ။ အဲဒါတွေကို မပြောခင်မှာ
    အကြောင်းလေးနဲ့ စလိုက်ရအောင်။

    Optional Tag Move To Center သူက စာလုံးတွေကို center ရောက်အောင်လုပ်ပေးပါတယ်။ <html> <head><title>Example</title></head> <body>

    This is center

    </body> </html> This is center ဆိုတာလေးက အလယ်ပိုင်းကိုရောက်နေတာကိုတွေ့ရပါမယ်။ အဲဒါလေးကို သုံးပြီး စာတွေကို အလယ်ပိုင်းကို ရွေ့ထားလို့ရပါတယ်။ <html> <head><title>Example</title></head> <body>

    Test

    </body> </html> အဲဒီ code မှာဆိုရင်တော့ header တွေက အလယ်ကိုရောက်နေတာကိုတွေ့ရပါလိမ့်မယ်။ Marquee marquee ကတော့ စာလုံးတွေကို ရွေ့နေဖို့လုပ်ဆောင်ပေးတာပါ။

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    <html> <head><title>Example</title></head> <body> <marquee>I’m moving</marquee> </body> </html> အဲဒီ code မှာဆိုရင် စာသားလေးက ရွေ့နေတာကိုတွေ့ရပါမယ်။ ဘယ်ဘက်ကနေ ညာဘက်ကိုရွေ့လာတာပါ။ Marquee မှာရှိတဲ့ attribute တွေကတော့ Attribute Name Properties Descripton behavior alternate ဘယ်ကနေညာ ၊ ညာကနေ ဘယ်ပြန်သွား ပါတယ်။ <marquee behavior="alternate">I'm moving</marquee> scroll သူက default value ပါ။ ဘယ်ကနေ ညာ ၊ ညာဘက်ရောက်သွားရင် ဝင်သွားပြီး ဘယ်ဘက်နေ ပြန်စတာပါ။ <marquee behavior="scroll">I'm moving</marquee> slide သူကတော့ ဘယ်ကနေညာ ပြီးရင် ညာဘက်လည်းရောက်ရော ရပ်သွားပါတယ်။ <marquee behavior="slide">I'm moving</marquee> direction left သူကတော့ default value ပါ။ ညာဘက်ကနေ ဘယ်ဘက်ကိုသွားမယ်လို့ ဆိုတာပါ။ <marquee direction="left" >I'm moving</marquee> right သူကတော့ ဘယ်ဘက်ကနေ ညာဘက်ကိုသွားမယ်လို့ဆိုတာပါ။ <marquee direction="right" >I'm moving</marquee> up သူကတော့ အောက်ကနေ အပေါ်လာမယ်လို့ဆိုတာပါ။ <marquee direction="up" >I'm moving</marquee> down သူကတော့ အပေါ်ကနေ အောက်ဆင်းမယ်လို့ဆိုတာပါ။ <marquee direction="down" >I'm moving</marquee> loop [number] သူကတော့ ကိုယ်ဘယ်နှစ်ကြိမ် marquee ကို လုပ်ခိုင်းမယ်ဆိုပြီး number တစ်လုံးထည့်ပေးရပါတယ်။ ၁ ဆို ၁ ကြိမ်ပဲလုပ်မယ်ပေါ့။ <marquee loop="1" >I'm moving</marquee> scrollamount [number] တစ်ခါရွေ့ရင် ဘယ်လောက် pixel ရွှေ့မလဲဆိုပြီး ထည့်ပေးရတာပါ။ ထည့်လိုက်တဲ့ နံပါတ်များလေလေ ဝေးဝေးရွေ့ မြန်မြန်သွားလေလေပဲ။ <marquee scrollamount="10">I'm moving</marquee>

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    scrolldelay [number] သူကတော့ ဘယ်လောက်ကြာရင် ရွှေ့မလဲဆိုတာပါ။ သူက millisecond နဲ့ပါ။ 1000 လို့ထည့်လိုက်ရင် 1 second ကြာမှ တစ်ခါရွေ့မှာပါ။ သူကတော့ နံပါတ်များလေလေ ကြာလေလေပါပဲ။ <marquee scrolldelay="1000">I'm moving</marquee> bgcolor [hex code] OR [Color Name] သူကတော့ marquee ရဲ့ back color အရောင်လေးပါ။ #009933 ဆိုရင်တော့ အစိမ်းရောင်လေးကို background ထားပြီး ရွှေ့သွားမှာပါ။ color ပိုင်းကို ကျွန်တော် အပေါ်ပိုင်းမှာ ပြောခဲ့ပြီးပါပြီ။ <marquee bgcolor="#009933" >I'm moving</marquee> marquee လေးလုပ်ရတာ ပျော်စရာတော့ကောင်းပါတယ်။ စာလုံးလေးတွေက ရွေ့ရွေ့သွားတာလေးကို ကြည့်ပြီး ကျေနပ်မှုလေးရနိုင်ပါစေ။ အခု font ပိုင်းကို ဆက်လက်လေ့လာရအောင်။ Font Font ကတော့ HTML မှာအရေးပါတဲ့ အပိုင်းပါ။ Web Page တစ်ခုမှာ ကိုယ်လိုချင်တဲ့ font ကိုပြောင်းလဲဖို့အတွက် font tag ကိုသိမှ ဖြစ်မှာပါ။။ <html> <head><title>Example</title></head> <body> Zawgyi Font ဖြင့်အသုံးပြုထားသည် </body> </html> အဲဒါဆိုရင် နဲ့ ကြားမှာရိုက်ထားတဲ့ စာက zawgyi-one font နဲ့ပေါ်နေမှာပါ။ face="font name" ကိုထည့်ရတာပါ။ font tag မှာသုံးလို့ရတဲ့ attribute တွေကတော့ Name Properties Description color [hex code] OR [color name] color ကတော့ သိပြီးသားပါ။ အပေါ်မှာလည်း ကျွန်တော် ပြောခဲ့ဘူးပါတယ်။ ဥပမာအနေနဲ့ ဒီလိုသုံးလို့ရပါတယ် Zawgyi Font ဖြင့်အသုံးပြုထားသည်

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    ္ဖ္ဖ္ဖ္ဖ္ဖ္ဖsize [number] သူကတော့ font ရဲ့ အရွယ်အစားပြောင်းတာပါ။ ပုံမှန်က size=3 ပါ။ စာလုံး size ကြီးလိုလျှင် size=4 ကနေ 7 ထိထည့်လို့ရပါတယ်။ 1 ကနေ 7 အထိရှိပါတယ်။ 3 ကတော့ ပုံမှန်စာလုံးပါ။ နောက်ပြီး +1 ကနေ +6 ရှိပါတယ်။ ပုံမှန်ကို ဘယ်လောက်တိုးမယ်ဆိုပါ။ +2 ဆိုရင် ပုံမှန်က 3 ဆိုတော့ 5 ဖြစ်သွားမှာပေါ့။ အဲလိုမျိုးပဲ -1 ကနေ -6 ထိရှိပါသေးတယ်။ -1 ဆိုရင် ပုံမှန်က 3 ဆိုတော့ 2 ဖြစ်သွားမှာပေါ့။ ဒီလိုလေး သုံးလို့ရပါတယ်။ Zawgyi Font ဖြင့်အသုံးပြုထားသည် Zawgyi Font ဖြင့်အသုံးပြုထားသည် Zawgyi Font ဖြင့်အသုံးပြုထားသည် ဒါတွေကတော့ အခြား text formatting tags တွေပါ။ အချို့ကတော့ အပေါ်မှာပြောခဲ့ဘူးပါတယ်။ Tag Description ' ဒါကိုတော့ အပေါ်မှာလည်း ပြောပြီးပါပြီ။ သူက font ကို blod လုပ်တာပါ။ သူကလည်း bold လုပ်တာပါပဲ။

    ဒါကတော့ tab ခုန်တာပေါ့။ ကိုယ့်စာပိုဒ်လေးကို တစ်တည်းတစ်သနု့်ထဲ ဖော်ပြချင်တဲ့ အခါမှာ သုံးကြပါတယ်။ ' italic လုပ်တာကို အပေါ်မှာပြောခဲ့ဘူးပါတယ်။

    ဒီ code ကိုလည်း သိမှာပါ။ ကျွန်တော်တို့တွေ enter တွေ tab တွေမလိုပဲ သုံးခဲ့တာလေ။ သူကတော့ စာလုံးကို ပုံမှန်ထက် သေးအောင် လုပ်ပေးတာပါ။ အဲဒါလေးကတော့ စာလုံးတွေရဲ့ အလယ်မှာ မျဉ်းသားလိုက်တာပါ။ သူကတော့ စာလုံးကို အောက်နားဆင်းတာလေးပေါ့။ H2 လိုမျိုးလေးအတွက်ပေါ့။ သူကတော့ စာလုံးကို အပေါ်တင်တာပါ။ 22 လိုမျိုးပေါ့။ ဒါက typing font ကိုပြောတာပါ။ typing ရိုက်သလို စာလုံးပေါ်အောင်အတွက်ပါ။ ဒါကိုတော့ သိပြီးလောက်ပြီလို့ထင်ပါတယ်။ underline တားတာပါ။ အခုဆက်ပြီးတော့ Link တွေအကြောင်းပြောပါမယ်။ Link ကတော့ Web Page မှာအဓိက အခန်းက ပါဝင်ပါတယ်။ Page တစ်ခုနဲ့ တစ်ခု ချိတ်ဆက်ထားဖို့ အတွက် Link ချိတ်တတ်ဖို့လိုပါတယ်။

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    Page Link And Image Link Page Link လုပ်တယ်ဆိုတာကတော့ page တစ်ခုကနေ နောက် page တစ်ခုကို ချိတ်ဆက်ထားပါတယ်။ အောက်က example ပုံလေးကို ကြည့်လိုက်ရင် နားလည်နိုင်ပါတယ်။ ကျွန်တော်တို့တွေ Home Page ကနေ Gallery Page ကို Go To Home ဆိုတဲ့ စာလုံးလေး နှိပ်လိုက်တာနဲ့ ကူးသွားမယ်။ နောက်ပြီး Gallery ကနေလည်း Home Page ကို Home ဆိုတဲ့ စာလုံးလေးကို နှိပ်လိုက်တာနဲ့ Home page ကို ပြန်ရောက်သွားမယ်။ အဲဒီလိုမျိုးလေး ဖြစ်အောင် ကျွန်တော်တို့ အောက်ကအတိုင်း ရေးလိုက်မယ်။ File ၂ ခုရှိရမယ်ပေါ့။ index.html နဲ့ gallery.html ပေါ့။ နေရာအတူတူပဲ သိမ်းထားနော်။ C:\example\index.html နဲ့ C:\example\gallery.html အဲလိုမျိုးလေး နေရာအတူတူဖြစ်ရမယ်။ Index.html <html> <head><title>Example</title> <body> <a href="gallery.html">Gallery</a> </body> </html> Gallery.html <html> <head><title>Example</title> <body> <a href="index.html">Home</a> </body> </html> အပေါ်က code ကိုမရှင်းပြခင် မေးချင်တာလေးတွေ ပါလာမယ်ထင်တယ်။ က ဘာကြီးလဲဆိုပြီးတော့။ နောက်ပြီးတော့ home page ကို home.html နဲ့ သိမ်းလို့ကော မရဘူးလား။ ဘာလို့ index.html နဲ့သိမ်းတာလဲ။ ဘာတွေကွာလဲ။

    အဲဒါက comment ရေးထားတာပါ။  ကြားမှာ ရေးထားတဲ့ စာတွေကို အလုပ်မလုပ်ပါဘူး။ ကျွန်တော်တို့ home page ကို ဘာလို့ index.html နဲ့ သိမ်းရလဲဆို web page တွေမှာ စတက်တဲ့ page က index.html
    

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    ပါ။ ဒါမှ မဟုတ် default.html ပေါ့။ www.example.com လို့ခေါ်လိုက်ရင် page တစ်ခုတက်လာမယ်။ တကယ်တမ်းတော့ www.example.com/index.html ဆိုတာကို သွားခေါ်ထားတာပါ။ အနောက်က index.html မပါလည်း အလုပ်လုပ်ပါတယ်။ ဒါကြောင့် Home Page ဆိုရင်တော့ index.html ဆိုပြီးသုံးရပါတယ်။ ဒါမှမဟုတ် default.html ဆိုလည်းရပါတယ်။ ကဲ.. Link အကြောင်းလည်း ဆက်သွားရအောင်။ link ချိတ်ချင်ရင် <a href="address">Name</a> ဆိုတဲ့ပုံစံမျိုးနဲ့ သွားရတာပေါ့။ address ဆိုတာကတော့ ကိုယ်ချိတ်ချင်တဲ့ page ပေါ့။ Name ကတော့ ပေါ်စေချင်တဲ့ နာမည်ပေါ့။ ထပ်မေးစရာလေး တစ်ခုထပ်ပေါ်လာတာကို တွေ့ရပါလိမ့်မယ်။ Link က အစကတော့ အပြာရောင်။ နောက်တော့ နီညိုရောင် ပြောင်းသွားတယ်။ ဘာဖြစ်လို့လည်း ။ အဲဒါကတော့ vistied ဖြစ်ပြီးသွားလို့ပါ။ တစ်ခါ click လုပ်ပြီးရင် အဲလိုအရောင် ပြောင်းသွားပါတယ်။ ကိုယ်နှိပ်ပြီးသားပေါ့။ အရောင်မပြောင်းချင်ရင်တော့ body မှာ vlink ဆိုတဲ့ attribute နဲ့ link ဆိုတဲ့ attribute မှာ အရောင် ပြင်လို့ရပါတယ်။ <body vlink="green" link="green"> အဲဒါဆိုရင်တော့ link color က အစိမ်းရောင်ဖြစ်နေတာကို တွေ့ရမှာပါ။ link လုပ်ရင် လူတိုင်းမေးတတ်တဲ့ မေးခွန်းတစ်ခုရှိပါတယ်။ file တွေကို download ချစေချင်တယ်။ ဘယ်လိုရေးရမလဲ။ တကယ်တမ်းတော့ လွယ်ပါတယ်။ link address ကို file ကိုပေးလိုက်ရုံပဲပေါ့။ <a href="file.zip>Download</a> အဲလိုမျိုးပုံစံလေးပေါ့။ ကဲ.. Link အကြောင်းရောက်ရင်တော့ path လမ်းကြောင်းလေး ကောင်းကောင်းသိဖို့လိုတယ်။ တော်တော်များများက မသိဘူး။ ရှုပ်တယ်လို့ထင်ကြတယ်။ တကယ်တမ်းအဲလို မရှုပ်ပါဘူး။ Path For Link Path <a href=" အောက်က path link">Path</a> ရှင်းလင်းချက် ./file.html OR file.html နေရာတစ်ခုထဲမှာ အတူတူ သိမ်းရင် အဲလိုခေါ်လို့ရပါတယ်။ C:\example\index.html ကနေ C:\example\gallery.html ကိုခေါ်ရင်ပေ့ါ။ ./ ကတော့ directory တူတူပဲလို့ ဆိုတာပါ။ ./download/download.html OR download/download.html ဒါကတော့ ကိုယ့် folder အောက်က folder ကို ထပ်ခေါ်တာပါ။ ../file.html သူကတာ့ မတူတော့ဘူး။ folder ကို up လုပ်ပြီး ခေါ်တာပါ။ ဘယ်လိုမျိုးလဲဆိုရင်တော့ C:\example\ download\index.html ကနေ C:\example\gallery.html ကိုခေါ်တာပေါ့။ download ဆိုတဲ့ folder အပေါ်တဆင့်က file ကိုခေါ်တာပေါ့။ နှစ်ဆင့် ခေါ်ချင်ရင်တော့ ../../file.html ပေါ့။ ../ ဆိုတာက folder directory ကို up လုပ်လိုက်တာပါ။ http://www.mysteryzillion.com ဒါကတော့ တခြား website တစ်ခုကို လှမ်းခေါ်တာပါ။ ./download/file.zip OR download/file.zip download ချဖို့အတွက် file တွေ image file တွေကိုလည်း တိုက်ရိုက်ခေါ်လို့ရပါတယ်။ image ပိုင်းတွေကို ကျွန်တော် နောက်ပိုင်း ဆက်လက်ရှင်းပြပါအုံးမယ်။

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    ဒီပတ်လမ်းကြောင်းတွေ အကြောင်းကောင်းကောင်းသိဖို့လိုပါတယ်။ ဘာဖြစ်လို့လည်းဆို ကိုယ့် site က ကြီးလာတာနဲ့ အမှ site structure က ရှုပ်ထွေးလာမှာပါ။ Link တွေလည်း များလာမှာဖြစ်လို့ပါ။ ဒါကြောင့် သေသေချာချာ သိထားသင့်ပါတယ်။ ကဲ.. အခု ကျွန်တော်တို့တွေ page မှာ ပုံလေးတွေ ထည့်ရအောင်။ Image ပုံတွေကတော့ web page တစ်ခုမှာ မဖြစ်မနေပါဝင်ရပါတယ်။ ကိုယ်တည်ဆောက်တဲ့ page ကို လှပပြီး အဓိပ္ပာယ်ပြည့်စုံဖို့ အတွက်ပါ။ ကဲ... ပုံလေးတွေ ထည့်ကြည့်ရအောင်။ <html> <head> <title>Example</title> </head> <body> <img src="Apple-logo.jpg"> Apple Logo</body> </html> တကယ်လို့ ပုံမမြင်ရပဲ ကြက်ခြေခတ် ( ) ပဲမြင်ရရင်တာ့ ထည့်ထားတဲ့ image ပတ်လမ်းကြောင်းမှားတာဖြစ်နိုင်သလို image extension မှားတာလည်း ဖြစ်နိုင်တယ်။ image ထည့်လို့ရတဲ့ extension တွေကတော့ jpg gif png တွေပဲ။ image က size ကြီးက ကြီးနေတယ်။ သေးချင်တယ်။ ဖြစ်ပါတယ်။ <html> <head> <title>Example</title> </head> <body> <img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body> </html> width နဲ့ height ဆိုတဲ့ attribute က ပုံရဲ့ size ကို ထိန်းချုပ်ပေးပါတယ်။ ကိုယ်ကြိုက်တဲ့ အလျားကို width မှာထည့်ပြီး အမြင့်ကိုတော့ height မှာထည့်ပြီး ပုံရဲ့ size ကိုပြင်လို့ရတယ်။ <img src="Apple-logo.jpg" width=80px height=80px alt="Apple Logo"> Apple Logo ဆိုရင်တော့ alt ဆိုတဲ့အထဲမှာရေးထားတဲ့ စာသားကို ပုံပေါ် Mouse လေးသွားတင်လိုက်ပြီး ခဏကြာမှာ ပေါ်လာမှာပါ။ ကျွန်တော်တို့ကတော့ tool tip လို့ခေါ်တာပါ။

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    Image ပိုင်းမှာ ပြောစရာတွေ တော်တော်များပါတယ်။ သူ့မှာ attribute တွေထပ်ရှိသေးတယ်။ ဘာလည်းဆိုတော့ text align ပေါ့။ text align ကို img code ထဲမှာ align ဆိုတဲ့ attribute ကိုသုံးတယ်။ Align ရှင်းပြချက် top စာတစ်ကြောင်းကို ပုံရဲ့ ဘေးနားက align မှာ အပေါ်ဆုံးမှာ ဖော်ပြပေးတာပါ။ bottom သူကတော့ default ပါ။ စာသားကို ပုံအောက်ဘက်မှာ ဖော်ပြတာကိုတွေ့ရပါမယ်။ middle စာသားကို ပုံအလယ်မှာ မှာပေးတာပါ။ left သူကတော့ ပုံကို page ရဲ့ ဘယ်ဘက်ကိုပို့လိုက်ပြီး စာသားအကုန်လုံးကို ပုံဘေးမှာ ဖော်ပြပေးတာပါ။ right သူကလည်း Left နဲ့ အတူတူပါပဲ။ ညာဘက်ကို ပုံရွေ့သွားပြီ စာသားအားလုံးကို ပုံရဲ့ ဘယ်ဘက်မှာ ဖော်ပြပေးပါမယ်။ ပုံ : img top ပုံ : img bottom ပုံ : img middleပုံ : img left

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    ပုံ : img right အခုဆိုရင် image နဲ့ပတ်သက်ပြီး တော်တော်လေးသိလောက်ပြီ ထင်တယ်။ နောက်ထပ်တစ်ခု ထပ်ပြောအုံးမယ်။ ပုံသေးသေးလေးကို နှိပ်လိုက်မှ ပုံအကြီးကြီးပြောင်းသွားသလိုမျိုးလေးပေါ့။ ပုံ size ကို width နဲ့ height attribute နဲ့ ချုံတာမဟုတ်ဘူးနော်။ ပုံနှစ်ပုံ။ တစ်ပုံက အကြီး ၊ နောက်တစ်ပုံက အသေးပေ့ါ။ Photo တွေကို size သေးတာကို ပြထားပြီး ပုံကို click လုပ်လိုက်မှ size ကြီးတဲ့ ပုံကို ပြ တဲ့ပုံပါ။ အဲလိုဘာလို့ လုပ်ရလဲဆို ပုံကြီးရင် page တက်တာကြာပါတယ်။ ဒါကြောင့် ပုံသေးကို အရင်ပြတယ်။ click လုပ်လိုက်မှ ပုံကြီးဖြစ်သွားမယ်။ <html> <head> <title>Example</title> </head> <body> <a href="fullsize.jpg"> <img src="smallsize.jpg" width=80px height=80px border=0> </a> </body> </html> အပေါ်က code ကို ဖတ်လိုက်တာနဲ့ နားလည်မယ်ထင်ပါတယ်။ အဲမှာ မေးစရာတစ်ခုထွက်လာတယ်။ border ဆိုတာဘာလဲပေါ့။ ကျွန်တော်တို့ href ကို သုံးလိုက်တဲ့ အခါ image မှာ အပြာရောင် border ဖြစ်သွားတယ်။ အဓိပ္ပာယ်ကတော့ Link ရှိတယ်ပေါ့။ အဲဒါလေးကို မပေါ်ချင်လို့ ဖျောက်လိုက်တာပါ။

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    ပုံ : border မဖျောက်ထားသော နဲ့ image ပုံ : border ဖျောက်ထားသော ပုံ အခုဆိုရင်တော့ ကျွန်တော်တို့တွေ link တွေ လုပ်တတ်သွားပြီ။ page တစ်ခုကနေ တစ်ခုကို ခေါ်တတ်သွားပြီ။ ပုံတွေ ထည့်တတ်သွားပြီ။ အခုအခန်းမှာ ကျွန်တော်က sample သေးသေးလေးတွေပဲ ပြသွားတယ်။ ကိုယ်တိုင် စမ်းကြည့်ပါ။ ပျော်ဖို့ တကယ်ကောင်းပါတယ်။ ကိုယ့် ပုံလေးတွေ နဲ့ web page လေး စမ်းဆောက်လို့တော့ရပြီ။ ဒါပေမယ့် ပြည့်ပြည့်စုံစုံဖြစ်အောင် ဆောက်လို့မရသေးတာကို တွေ့မှာပါ။ ကျွန်တော်တို့ table လိုအပ်နေသေးတာပါ။ နောက်တစ်ခန်းမှာ table နဲ့ frame တွေအကြောင်း ပြောပြပါမယ်။

    HTML For Web Design Suit Creating Web Page With Apperance And Link[ပြင်​ဆင်​ရန်​]

    Table And Frame Table ဟာ web page တည်ဆောက်ရာမှာ အရေးပါပါတယ်။ စတင်လေ့လာသူတွေအတွက်တော့ table ကသာ web page frame ကို ပုံစံကျအောင် လုပ်ပေးနိုင်တာပါ။ တကယ်လို့ ကိုယ်က professional ဖြစ်သွားပြီ ၊ stylesheet တွေ တတ်သွားပြီဆိုရင်တော့ div နဲ့ CSS ကို တွဲပြီးတော့ ကိုယ့် page ကိုလှပြအောင် လုပ်နိုင်တာပေါ့။ အခုတော့ HTML အကြောင်းပဲ ပြောနေသေးတယ် ၊ နောက်ပြီး CSS အကြောင်းတွေ Advance ဖြစ်တဲ့အကြောင်းတွေ မပါသေးဘူး။ table သုံးပြီးလည်း သူများ web page တွေလို လှမလာပါလားလို့ မေးချင်ရင် မေးလာနိုင်လို့ အခုလိုဖြေထားတာပါ။ ကဲ table အကြောင်းလေးစရအောင်။ Table ဆိုတာTable တစ်ခုကိုတည်ဆောက်ရာမှာ အခြေခံအားဖြင့် roll နဲ့ column ပါဝင်ပါတယ်။ နောက်ပြီး cell ကွက်လေးတွေ နဲ့ တည်ဆောက်ထားပါတယ်။ Table တစ်ခုဟာ ကျွန်တော် အပေါ်မှာ ပြောခဲ့သလို HTML တစ်ခုတည်းနဲ့ web site တစ်ခု တည်ဆောက်ရာမှာ တော်တော်လေးအသုံးဝင်ပါတယ်။ နောက်ပြီး Gallery Page တွေ တည်ဆောက်ရာမှာ အရမ်းအသုံးဝင်တယ်။ Page တစ်ခုလုံး Layout ကို CSS ကိုသာအသုံးပြုတတ်မယ်ဆို Table ထက်စာရင် CSS ကို အသုံးပြုသင့်တယ်။ CSS ဆိုတာ ဘာလဲဆိုတော့ Cascading Style Sheets ပါ။ ဒီစာအုပ်မှာတော့ CSS အကြောင်းပါဝင်မှာ မဟုတ်ပါဘူး။ ဒီစာအုပ်ဟာ Web Page ကိုစလေ့လာခါစ အခြေခံအကျဆုံးဖြစ်တဲ့ HTML အကြောင်းကိုသာ ပြောသွားတာပါ။ HTML ကိုသေသေချာချာနားလည်သွားရင် CSS နဲ့တွဲသုံတဲ့အခါမှာတော့ ကိုယ့် site လေးဟာ သေသပ်လှပလာမှာပါ။ အခုတော့ HTML အကြောင်းလေးပဲ ဆက်လိုက်ရအောင်။

    အပေါ်ပုံကို ကြည့်လိုက်ပါ။ အကွက်တစ်ခုလုံးအပြည့်ဟာ table ပါ။ နောက်ပြီး စာရေးထားတဲ့ အကွက်တွေဟာ cell တွေပေါ့။ cell ကွက်တွေထဲမှာပဲ စာရေးတာပါ။ ကဲ.. ပိုပြီး နားလည်သွားအောင် code လေးတွေနဲ့စလိုက်ရအောင်။ <head> <title>Example Table</title> </head> <body>

    Row

    Row

    HTML For Web Design Suit Table And Frame[ပြင်​ဆင်​ရန်​]

    </body> </html> Table တစ်ခုစတင်ပြီဆိုရင်တော့

    ၁။ နဲ့ စပြီး နဲ့ပိတ်ရမှာပါ။ ၂။ ကိုယ်ထည့်ချင်တဲ့ Row အရေအတွက် ရှိသလောက်ကို ကိုသုံးရမှာပါ။ ကိုယ်က row ၂ ခုလိုချင်တယ်ဆိုပါစို့။ဒါဆိုရင် ဆိုပြီး နှစ်ခုသုံးရမှာပေါ့။ ၃။ကိုယ်ထည့်ချင်တဲ့ column အရေအတွက် ရှိသလောက်ကို ကိုသုံးရမှာပါ။ ကို နဲ့ ကြားမှာ ထည့်ပြီးသုံးရမှာပါ။ ကျွန်တော်တို့ column ၂ ခုဆိုရင် ဒါဆိုရင် column ၂ ခုပေါ့။

    ကဲ... ကျွန်တော်တို့တွေ row ၂ ခု column ၃ ခုလုပ်မယ်ပေါ့။

    row ၂ ခုဖြစ်တဲ့အတွက်ကြောင့် ၂ ခုသုံးရမယ်။ column ၃ ခုဖြစ်လို့ ကို ၃ ခုသုံးမယ်။ ပထမ row မှာ ၃ခုဆို အခြား row တွေမှာလည်း ၃ခုဖြစ်မှ table ပေါ်လာမှာပါ။

    1

    2

    3

    4

    5

    HTML For Web Design Suit Table And Frame[ပြင်​ဆင်​ရန်​]

    6

    အဲဒီ Example ကို ကြည့်လိုက်ရင် နားလည်နိုင်မလားမသိဘူး။ ကျွန်တော်တို့တွေ row ၂ ခုနဲ့ column ၃ ခု ရှိတဲ့ table တစ်ခုတည်ဆောက်ခဲ့တာပါ။ table ပိုင်းကို ရှုပ်တယ်လို့ ထင်ချင်ထင်နေပါလိမ့်မယ်။ ဟုတ်ပါတယ်။ ရှုပ်ပါတယ်။ ဒါပေမယ့် နားလည်သွားရင် လွယ်ပြီး သုံးလို့ကောင်းပါတယ်။ ကျွန်တော်တို့တွေ table ပိုင်းကို သေသေချာချာလေး လေ့လာဖို့လိုပါလိမ့်မယ်။ ကဲ... နောက်ထပ် example တစ်ခု ထပ်လုပ်ကြည့်ရအောင် ။ အခု ကျွန်တော်တို့တွေ row ၃ ခု column ၃ ခု ရှိတဲ့ table တစ်ခုကို ဆောက်ကြည့်ရအောင်။

    row ၃ခု ဖြစ်လို့ ၃ခုပါမယ်။ column ၃ ခုဖြစ်လို့ နဲ့ ကြားမှာ ၃ ခုပါမယ်။ အဲလိုလေး စဉ်းစားလို့ရသွားပြီဆိုရင် စပြီး code ရေးကြည့်ရအောင်။

    <html> <head><title>Example</title></head> <body>

    1 2 3
    3 4 5
    6 7 8

    </body> </html>

    HTML For Web Design Suit Table And Frame[ပြင်​ဆင်​ရန်​]

    ကဲ... အခုလောက်ဆို နားလည်လောက်ပြီထင်တယ်။ ကျွန်တော်တို့ ရှေ့ဆက်ရအောင်။ ကျွန်တော်တို့တွေဟာ table ရဲ့ width ကို ထိန်းချုပ်နိုင်ပါတယ်။ table ရဲ့ width ကို သတ်မှတ်တဲ့အခါမှာ % နဲ့သတ်မှတ်တာနဲ့ pixel နဲ့ သတ်မှတ်တာရယ်ရှိပါတယ်။

    table ရဲ့ width သာမက
    ရဲ့ width တွေကိုပါသတ်မှတ်နိုင်ပါတယ်။ % နဲ့ သတ်မှတ်တာနဲ့ Pixel နဲ့ သတ်မှတ်တာ ဘာကွာသလဲဆိုရင်တော့ % ကတော့ broswer ရဲ့ အပေါ်မှာ မူတည်ပြီး width ကပြောင်းလဲပါတယ်။ pixel ကတော့ မပြောင်းလဲဘူးပေါ့။ အသေပေါ့။ % နဲ့ဆိုရင် broswer ချဲ့လိုက်တာနဲ့ လိုက်ကျယ်သွားပါတယ်။ pixel နဲ့ဆိုရင်တော့ browser

    ကျယ်လည်း လိုက်မကျယ်သွားပါဘူး။ ကဲ.. စလိုက်ရအောင်။ <html> <head><title>Example</title></head> <body>

    1 2 3
    3 4 5
    6 7 8

    </body> </html>

    HTML For Web Design Suit Table And Frame[ပြင်​ဆင်​ရန်​]

    အဲဒီမှာဆိုရင် width က 100% ဖြစ်တဲ့အတွက်ကြောင့် browser အပြည့် table ကယူပါမယ်။ အဲဒီက အပေါ်ဆုံး first row ကိုဒီလိုပြင်ကြည့်လိုက်ပါ။

    ဒါဆိုရင်တော့ ပထမ column ရဲ့ width ကို 30px လို့သတ်မှတ်လိုက်ပါပြီ။ ပထမ row မှာသတ်မှတ်လိုက်ရင် တခြား row တွေရဲ့ ပထမ column ကိုပါသတ်မှတ်ပြီးသား ဖြစ်သွားပါလိမ့်မယ်။ ကျွန်တော်တို့တွေဟာ px သာမက % နဲ့ပါ သတ်မှတ်နိုင်ပါတယ်။ column ၃ ခုလုံးကို သတ်မှတ်ချင်ရင်တော့ ဒီလိုရေးလို့ပါတယ်။ ဒီလောက်ဆိုရင် HTML ကိုအတော်လေးသဘောပေါက်လောက်ပြီလို့ထင်ပါတယ်
    1 2 3
    1 2 3