နည္းပညာ(suran): HTML

Showing posts with label HTML. Show all posts

List

list tag သည္ စာသားေတြ ၊စာပိုဒ္ေတြကို list ေတြသတ္မွတ္ခ်င္တဲ့ အခါမွာ အသံုးျပဳပါတယ္၊

tag ကို orderlist

ကို အသံုးျပဳပါသည္။ ဥပမာ=
Tea

For ordered lists (
)သတ္မွတ္ရန္

Value	Description
1	Numerical ordered list (this is default) (1, 2, 3, 4)
a	Alphabetically ordered list, lowercase (a, b, c, d)
A	Alphabetically ordered list, uppercase (A, B, C, D)
i	Roman numbers, lowercase (i, ii, iii, iv)
I	Roman numbers, uppercase (I, II, III, IV)

နံပါတ္ေတြကို ဘယ္ကေန စျပီးေဖၚျပျခင္တယ္ဆိုရင္ေတာ့

ကိုသံုးေပးရပါတယ္။ နံပါတ္ေတြကို ကိုၾကိဳက္တဲ့ေနရာကေန စေစခ်င္လ်ွင္

ဒါဆိုရင္ ၄ ကေနစသြားမွာျဖစ္ပါတယ္။

ဆိုတာ ကေတာ့ နံပါတ္မဟုတ္တဲ့ တစ္ျခားအရာေတြ(circle )ကို သတ္မွတ္ဖို႕ျဖစ္ပါတယ္။

For unordered lists (
):

Value	Description
disc	Default. A filled circle
circle	An unfilled circle
square	A filled square

ခ်စ္သူ

type="b">သူငယ္ခ်င္း

ရည္းစား

ေယာက္က်ား

"square

">မိန္းမ

သတၱဝါ

ခ်စ္သူ
သူငယ္ခ်င္း
ရည္းစား

ေယာက္က်ား
မိန္းမ
သတၱဝါ

အားလံုးကိုေလးစားလ်က္ပါ။

HTML Attribute
HTML ကိုေလ့လာရာမွာ Attributes ေတြရဲ့ က႑က သိပ္ကိုအေရးပါပါတယ္၊ Attribute ေတြကို ကၽြမ္းက်င္စြားကိုင္တြယ္ အသံုးျပဳႏိုင္ရင္ HTML
၀က္ဆိုက္စာမ်က္ႏွာကို ပိုမို လွပသပ္ရပ္ေစပါတယ္၊ HTML ရဲ့ Attribute ေတြက HTML Tags ေတြကို အခ်က္အလက္ေတြ ထည့္ေပးတယ္၊ ဒီလို HTML
Tags ေတြကို Attribute ေတြက သတင္းအခ်က္အလက္ေတြ ထပ္ျဖည့္ေပးျပီး ပိုမိုလွပတဲ့ HTML ဆိုက္ကိုျဖစ္ေစသလို Element တစ္ခုစီကိုလဲ မတူညီတဲ့
စတိုင္းေတြအျဖစ္ေျပာင္းလဲေပးႏိုင္ပါတယ္၊ ေအာက္က ဥပမာကိုၾကည့္ပါ၊
<body bgcolor = red>
<p> hey wht is this </p>
<hr width=300px>`
<body>
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ ေနာက္ခံ အေရာင္ကို အနီေရာင္ျခယ္ထားတဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကိုေတြ႔ရမွာပါ၊
<body bgcolor = red>
အနီေရာင္ျခယ္ဖို႔အတြက္အသံုးျပဳလိုက္တဲ့ bgcolor = red ဆိုတာက attribute ပါ၊ သူ႔ကိုထည့္လိုက္တာက <body> ဆိုတဲ့ HTMl Tag အထဲမွာပါ၊
ထည့္တဲ့ေနရာက ေနာက္ဆံုး ပိတ္မယ့္ျမား ရဲ့ေရွ႕မွာပါ၊ အဲ့ဒီ့လို ပဲ အျခား HTML Tags ေတြကို Attribute ထည့္ရင္လဲ အဖြင့္ Tag ရဲ့
အဆံုးမွာထည့္ေပးရပါတယ္၊ HTMl Attribute တိုင္းမွာ name နဲ႔ Value ဆိုျပီးရွိပါတယ္၊
အထက္က <body> ထဲမွာ ထည့္လိုက္တဲ့ bgcolor = red ဆိုတဲ့ စာေၾကာင္းမွာ bgcolor က name ျဖစ္ျပီး red က value ျဖစ္ပါတယ္၊ bgcolor = red
ဆိုတာက attribute နာမည္ bgclolr နဲ႔ တန္ဖိုး red ကိုထည့္လိုက္တယ္လို႔အဓိပၸါယ္ရပါတယ္၊ ဒီေတာ့ အဓိပၸါယ္က HTML Document ရဲ့ body
အစိတ္အပိုင္းကို ေနာက္ခံအနီေရာင္ထည့္မယ္ လို႔ေျပာတာျဖစ္သြားပါတယ္၊
အထက္က ဥပမာမွာပဲ <hr width = 300px> လို႔ထည့္ထားေသးပါတယ္၊ သူ႔ကလဲ <hr/> ဆိုတဲ့ HTML Tag ထဲမွာ attribute ျဖစ္တဲ့ width = 300px
ကိုထည့္ထားတာ၊ အဲ့ဒီ့ Attribute မွာလဲ name ျဖစ္တဲ့ width နဲ႔ တန္ဖိုး (value) ျဖစ္တဲ့ 300px; ဆိုျပီးပါပါတယ္၊ ဒါ့ေၾကာင့္ အထက္က ကုတ္ကို Run
ၾကည့္လိုက္ရင္ 300 px သာရွိတဲ့ မ်ဥ္းေၾကာင္းတားထားတာကိုေတြ႔ရမွာပါ၊ ဒီေတာ့ <hr width = 300px> ရဲ့ အဓိပၸါယ္က HTML Document မွာပါတဲ့
မ်ဥ္းေၾကာင္းကို အရွည္ 300px ရွိတဲ့ မ်ဥ္းေၾကာင္းအျဖစ္ထားမယ္လို႔ျဖစ္သြားတယ္၊
ေနာက္ထပ္ဥပမာ တစ္ခု ထပ္ျပပါမယ္၊
<a href= “72coder.com”>Visit Us</a>
အထက္က ဥပမာကေတာ့ အျခား ဆိုက္တစ္ကို သြားေရာက္ဖို႔အတြက္ ထားတဲ့လင့္ပါ၊ အဲ့ဒီ့လင့္ကို Attribute ထည့္ထားတယ္၊ attribute က href=
“72coder” ပါ၊ သူမပါပဲ ေရးမယ္ဆိုရင္ျဖင့္ <a> Visit Us </a> လို႔ပဲျဖစ္သြားမယ္၊ Attribute ျဖစ္တဲ့ href = “72coder.com” ပါလို႔ စာေၾကာင္းက
အရွည္ျဖစ္သြားတာ၊
Href = “72coder.com” မွာ href က attribute name ျဖစ္ျပီး “72coder” ကေတာ့ attribute value ပါ၊
အျခား Attribute ေတြလဲ ရွိပါေသးတယ္၊ ေနာက္ပိုင္း သင္ျပပါဥိးမယ္၊

html_4

1:43 AM HTML No comments

HTML Element
ေရွ႕ဆံုးအခန္းမွာေတာ့ Tags ေတြနဲ႔ Element ေတြကြာျခားပံုကို ထပ္ျပီးရွင္းျပမယ္၊ ေအာက္က စာေၾကာင္းကိုၾကည့္ပါ၊
<p>what the hack is going on with my life</p>
အထက္က စာေၾကာင္းကို ၾကည့္ျပီ Element က ဘယ္အစိတ္အပိုင္းလဲ လို႔ ေမးရင္၊ စာေၾကာင္းတစ္ေၾကာင္းလံုး က Element ပါ၊ <p> အစကေန </p>
အဆံုးအထိပါ၊ စာသားေတြျဖစ္တဲ့ what the hack is going on with my life ဆိုတဲ့စာသားလဲပါတယ္၊ အဲ့ဒီ့ စာေၾကာင္းတစ္ေၾကာင္းလံုး ကိုမွ Element
တစ္ခုလို႔ေခၚတယ္၊ အေၾကာင္းအရာျဖစ္တဲ့ content ပါမယ္၊ အဲ့ဒီ့ Content ကို ၀ိုင္းထားတဲ့ အဖြင့္ အပိတ္ Tags ေတြပါမယ္၊ ဒါကိုမွ Element
တစ္ခုလို႔ေခၚတယ္၊
<p> နဲ႔ </p> တို႔က html tags ပါ၊ သူတို႔က Element အဆင့္မျဖစ္ေသးပါဘူး၊ သူတို႔နဲ႔ အတူ အေၾကာင္းအရာ content ပါလာမွ HTML Element
တစ္ခုျဖစ္လာမယ္၊
HTML Nesting
HTML မွာ Nested Element ဆိုတာရွိပါတယ္၊ Nested Element ဆိုတာ အသိုက္ဖြဲ႔ထားတဲ့ ပံုစံရွိတဲ့ Element ေပါ့၊ သူက အမ်ားၾကီးကို တစ္ခုနဲ႔ တစ္ခု
၀ိုင္းထားတယ္၊ Content ကေတာ့ ခုထဲပါမယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
<body>
<p><b><i>I am not such a greate guy.</i></b></p>
</body>
အထက္က ဥပမာမွာ content ျဖစ္တဲ့ အၾကာင္းအရာ I am not such a great guy ဆိုတဲ့စာသားကို HTML Tags ေလးခုနဲ႔၀ိုင္းထားပါတယ္၊ <body>
ရယ္၊ <p> ဆိုတဲ့ Paragraph tags ရယ္ <b> ဆိုတဲ့ bold tags ရယ္၊ <i> ဆိုတဲ့ italic tag ရယ္တို႔ပါ၀င္ပါတယ္၊ ဒီလို အေၾကာင္းအရာတစ္ခုကို
HTML Tags ေတြအမ်ားၾကီးနဲ႔ ၀ိုင္းထားမယ္ ဆိုရင္ Nested Elment လို႔ေခၚတယ္၊ Nested Element လို႔ေခၚရင္ html tags ေတြေရာ
content ျဖစ္တဲ့စာသားေတြေကာအားလံုးပါတယ္၊ ဒီေတာ့ content တစ္ခုကို HTML tags တစ္ခုထပ္ပိုတဲ့ tags ေတြနဲ႔ ၀င္းရံျပီး မွတ္သားထားရင္
Markup လုပ္ထားရင္ အဲ့ဒီ့ အစုအေ၀း တစ္ခုလံုးကို HTML Nested Element လို႔ေခၚတယ္ဆိုတာမွတ္သားပါ၊
Element ေတြကို အသံုးျပဳထားတဲ့ HTML tags ေတြေပၚမူတည္ျပီး နာမည္ေခၚၾကတယ္၊ ဥပမာ paragraph tag နဲ႔ ၀န္းရံထားတဲ့ content တစ္ခုပါတဲ့
element ကို <p> element လို႔ေခၚမယ္၊ ေအာက္မွာၾကည့္ပါ၊
<p>ငုပ္လွ်ပ္သာကိုစီ ဆုတ္ကာေလြးေတာ့သည္ ျပီလွ်င္ေရမရွာ ေခြးသာေကၽြးေတာ့သည္ </p>
အထက္ကHTML Element ကို၊ <p> element လို႔ေခၚတယ္၊
<b>အခ်ိန္ညေန ေဆာင္းအတြင္း အေပါင္းအသင္းနဲ႔ ေရခက္လာ</b>
အထက္က HTML Element ကိုေတာ့ <b> element လို႔ေခၚပါတယ္၊
<i>မုေလးရံု ေတာအစ ေဒါနလမ္းေျမညီ ေလွ်ာက်စမ္းေရၾကည္တဲ့ ေရႊႏွင္းစီကန္ေခ်ာင္း
လြမ္းမတတ္စက၀ါ အငူက နံ႔သာျဖဴေလးေမာင့္ စံေက်ာင္း</i>
အထက္က HTML Element ကိုေတာ့ <i> element လို႔ေခၚပါတယ္၊
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
အထက္က ဥပမာ တစ္ခုလံုးကေတာ့ Html element ျဖစ္ပါတယ္၊
အထက္က ဥပမာ ေတြကိုၾကည့္ျပီး Nested Element ဆိုတာ HTML tags တစ္ခုထပ္ပိုတဲ့ tags ေတြနဲ႔ ၀န္းရံထားတဲ့ content ပါတဲ့
အစုတစ္ခုကိုေခၚတယ္ဆိုတာမွတ္ပါ၊ HTML Element တစ္ခုကိုနာမည္တပ္ေခၚမယ္ဆိုရင္ အရင္ထည့္ထားတဲ့ HTML tag ရဲ့
နာမည္ကိုအထူးျပဳျပီးေခၚရပါတယ္၊
HTML Empty Element
HTML မွာ empty tag ေတြလဲရွိတယ္၊ သူတို႔မွာ content ေတြမပါဘူး၊ <br/> နဲ႔ <hr/> တို႔က empty element ပါ၊ သူတို႔ေတြမွာ start tag အဖြင့္ ရယ္
close tag အပိတ္ရယ္ ဆိုျပီးပါတယ္၊ သူတို႔ေတြမွာ content မပါဘူး၊ self closing လို႔ေခၚတဲ့ ကို႔ဘာသာကိုယ္ျပန္ပိတ္ထားတယ္၊ အဲ့ဒီ့လို tags ေတြကိုေတာ့
HTML Empty Element လို႔ေခၚပါတယ္၊
HTML Tags ေတြက Case Sensitive အမ်ိဳးအစားေတြမဟုတ္ပါဘူး၊ သူတို႔ကို စာလံုးအၾကီးနဲ႔ ေရးလို႔ရသလို အေသးနဲ႔လဲေရးလို႔ရတယ္၊ ဒါေပမယ့္ 72coder
ကေတာ့ အေသးနဲ႔ ေရးဖို႔အၾကံျပဳပါတယ္၊
HTML Block Element
HTML မွာစာေၾကာင္းေတြကိုပိတ္ပစ္တဲ့ Elements ေတြရွိတယ္၊ သူတို႔ကိုေတာ့ Block Element လို႔ေခၚတယ္၊ သင္ <h1>what is that </1>
လို႔ေရးလိုက္ရင္ အဲ့ဒီ့ What is that က စာလံုး အၾကီးျဖစ္သြားရံုတင္မကဘူး၊ စာေၾကာင္းတစ္ေၾကာင္းလံုးကိုပါယူသြားတယ္၊ သူေဘးမွာ
ဘယ္သူ႔ကိုမွ ေနရာမယူခိုင္းေတာ့ဘူး၊ သူေနာက္က လိုက္ေရးတဲ့စာေတြလဲ တကယ္၀က္ဆိုက္မွာထြက္လာေတာ့ သူ႔ေနာက္က
မလာပဲ ေနာက္တစ္ေၾကာင္းမွာ ေပၚလာတယ္၊ ဒါကို block လုပ္ျပစ္တယ္လို႔ေခၚတယ္၊ အဲ့ဒီ့လို သက္ဆိုင္းရာစာေၾကာင္းကို block လုပ္ျပစ္တဲ့ HTML
elements ေတြကို HTML Block Element လို႔ေခၚပါတယ္၊ ဥပမာ <h1> <hr> <p> <ul> <table> တို႔ပါ၊ ေနာက္လဲရွိပါေသးတယ္၊
HTML Inline Element
HTML Inline Element ကေတာ့ Block Element နဲ႔ ေျပာင္းျပန္ပါ၊ သူတို႔ေနာက္မွာ အျခားစာေၾကာင္းေတြလိုက္လို႔ရတယ္၊ လိုက္ခြင့္ရွိတယ္၊ သူတို႔က
စာေၾကာင္းတစ္ေၾကာင္းလံုးကို Block elements ေတြလိုေမာင္ပိုင္ မစီးလိုက္ပါဘူး၊ ဥပမာ <b> <i> <code> တို႔လုိမ်ိဳး Elements ေတြပါ၊ သူတို႔က
tags ေတြျဖစ္ေပမယ့္ အခုက content ေတြပါတဲ့ အေနနဲ႔ ရွင္းျပေနလို႔ Elements ေတြလို႔သံုးလိုက္တာေနာ္၊

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

HTML ရဲ့ <div> Element ဆိုတာက HTML Element အုပ္စုတစ္ခုအေနနဲ႔ သံုးလိုတဲ့ HTML Tags မ်ားနဲ႔ Elements မ်ားကို ၀ိုင္းျပီး အုပ္စုတစ္ခုအေနနဲ႔

သံုးလို႔ရေအာင္ ဖန္တီးေပးပါတယ္၊ <div> element တစ္ခုကို <div> အဖြင့္ နဲ႔ </div> အပိတ္တို႔ကိုအသံုးျပဳျပီးေရးရပါတယ္၊ <div> Element ကို CSS

ဖိုင္ေတြအတြက္ အဓိက သံုးပါတယ္၊ သက္ဆိုင္ရာ အမ်ိဳးအစားတူညီတဲ့ အလုပ္မ်ိဳး အလွဆင္မူမ်ိဳး style ထုတ္မူမ်ိဳးကို လုပ္ဖို႔အတြက္ <div> ကိုသံုးျပီး

အလုပ္လုပ္လိုတဲ့အစိတ္အပိုင္းကိုသတ္မွတ္ပါတယ္၊ <div> မွာ အထူးအဓိပၸါယ္ေတာ့မရွိဘူး၊ ဒါေပမယ့္ <div> သံုးထားတဲ့ အုပ္စုက block level

element ျဖစ္တဲ့အတြက္ ေရွ႕နဲ႔ ေနာက္မွာ အျခား Element နဲ႔ Tag တို႔မလာႏိုင္ေအာင္စာေၾကာင္းကိုျဖတ္ထားပါတယ္၊ ဒါ့ေၾကာင့္ <div> ပါတဲ့စာေၾကာင္းကို

Browser ကေတြ႔ရင္ သူ႔ရဲ့ ေရွ႕ နဲ႔ ေနာက္မွာ စာေၾကာင္းျခားပစ္မွာျဖစ္ပါတယ္၊ CSS မွာေတာ့ <div> ကိုအသံုးျပဳျပီး HTML မွာ Table ေတြနဲ႔

တည္ေဆာက္တဲ့ ၀က္ဆိုက္ Layout (ေနရာခ်ထားပံု) ကိုဖန္တီးပါတယ္၊

The HTML <span> Element

<span> element ကို ေတာ့ inline element အျဖစ္ HTML Document မွာ စာသားေတြသိုေလွာင္ တဲ့ ေနရာအျဖစ္သံုးပါတယ္၊ <span> element မွာ

တျခားထူးျခားတဲ့ အဓီပၸါယ္ေတာ့မရွိပါဘူး၊ CSS မွာေတာ့ <span> ကိုအသံုးျပဳျပီး စာသားအစိတ္အပိုင္းတစ္ခုကို Attributes ေတြ သတ္မွတ္ျပီး Style

ထုတ္ဖို႔သံုးႏိုင္ပါတယ္၊

html_3

1:42 AM HTML No comments

HTML Paragraph
သင့္၀က္ဆိုက္မွာ စာေရးတဲ့အခါ စာပိုက္ေတြကိုခြဲျပီးေရးႏိုင္တယ္၊ စာပိုဒ္ တစ္ပိုဒ္ စီမွာေတာ့ စာပိုဒ္ျဖစ္ေၾကာင္း HTML Tags နဲ႔ မွတ္သားထားရမယ္၊ စာပိုဒ္
အတြက္ အသံုးျပဳတဲ့ HTML Tags ကေတာ့ အဖြင့္ <p> နဲ႔ အပိတ္ </p> တို႔ပါ၊ အဖင့္ <p> နဲ႔ အပိတ္ </p> တို႔ကို စာပိုဒ္တစ္ခုရဲ့ အစ နဲ႔ အဆံုးမွာထည့္
ေပးျပီး စာပိုဒ္ျဖစ္ေၾကာင္းကို သတ္မွတ္ရပါတယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<p> You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see.</p>
<p> You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see.</p>

</body>
</html>
အထက္က HTML Document ကို Run ၾကည့္လုိက္ပါ၊ ဒါဆိုေရးထားတုံုးက ေရာေရးထားေပမယ့္ သင့္၀က္ဆိုက္မွာေတာ့ စာပိုဒ္ေတြခြဲျပီး ေဖာ္ျပေနတာကို
ေတြ႔ရမွာပါ၊ ဒါကေတာ့ အဖြင့္ <p> နဲ႔ အပိတ္ </p> ဆိုတဲ့ Paragraph tags ထည့္ထားလို႔ပါ၊
HTML Line Break
စာပိုက္ေတာ့မခြဲခ်င္ဘူး စာေၾကာင္းပဲ ျခားခ်င္တယ္ဆိုရင္လဲ စာေၾကာင္းျခားတဲ့ HTML tag ျဖစ္တဲ့ line break <br/> ကိုသံုးႏိုင္ပါတယ္၊ တစ္ခ်ိဳ႕ေတာ့
ေနာက္က မ်ဥ္းေစာင္းကိုထည့္မေရးဘူး၊ <br/> က အဖြင့္ ပိတ္ကို တစ္ခုထဲမွာပဲ လုပ္သြားတယ္၊ ေျပာခ်င္တာက အဖြင့္ <br> နဲ႔ အပိတ္ </br> ဆိုျပီးမရွိ
ဘူး၊ <br/> ဆိုျပီးတစ္လံုးထဲပဲထည့္ရတယ္၊ အဖြင့္ နဲ႔ အပိတ္ မရွိတာေၾကာင့္ သူ႔ကို self closing tag လို႔ေခၚတယ္၊ ထည့္ရမယ့္ ေနရာကို စာေၾကာင္းကို
အဆံုးသတ္ျပီး ေနာက္တစ္ၾကာင္းကိုေျပာင္းေစခ်င္တယ္ဆိုရင္ အဲ့ဒီ့ အဆံုးသတ္မယ့္ စာေၾကာင္းရဲ့ ေနာက္ဆံုးမွာထည့္ရမွာ၊ ေအာက္မွာဥပမာကိုၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go. <br/>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go.<br/>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go.<br/>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go.<br/>
</body>
</html>
အထက္က ဥပမာမွာ အဆံုးသတ္လိုတဲ့စာေၾကာင္းေတြရဲ့ေနာက္မွာ <br/> ကိုထည့္ထားတယ္၊ ဒါေၾကာင့္ အဲ့ဒီ့စာေၾကာင္းအဆံုးသတ္သြားျပီး
ေနာက္ေရးသမွ်စာေတြအားလံုး ေနာက္တစ္ၾကာင္းကိုေရာက္သြားမယ္၊
စာေၾကာင္းျခားတဲ့ Tag ျဖစ္တဲ့ <br/> နဲ႔ စာပိုက္ျခားတဲ့ tags ျဖစ္တဲ့ <p> </p> တို႔မတူၾကပါဘူး၊ စာပိုဒ္ tag အတြက္ browser က ေရွ႕နဲ႔ ေနာက္မွာ
ေနရာလြတ္ခ်န္ေပးထားပါတယ္၊ ႏို႔ေပမယ့္ စာေၾကာင္းျခားတဲ့ <br/> tag အတြက္ေတာ့ ေနရာလြတ္မထားေပးပါဘူး၊
HTML Horizonal Line
စာပိုက္တစ္ခုေအာက္မွာမ်ဥ္းေၾကာင္း ထားလို႔ရပါတယ္၊ Line မ်ဥ္းေၾကာင္းကို ကိုစားျပဳတဲ့ HTML tag ကေတာ့ <hr/> ျဖစ္ပါတယ္၊ သူလဲ Line break tag
<br/> လိုပဲ self closing tag ပါ၊ အဖြင့္ အပိတ္ ႏွစ္ခုမရွိဘူး၊ မ်ဥ္းတားလိုတဲ့ စာပိုဒ္ရဲ့ေအာက္မွာ <hr/> လို႔ထည့္ေပးလိုက္တာနဲ႔ မ်ဥ္းေၾကာင္း တစ္ေၾကာင္း
တားျပီးသားျဖစ္သြားမယ္၊ ေအာက္မွာဥပမာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go. <hr/>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go.<hr/>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go.<hr/>
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of
we though this was slow, will it’s best getting worse where would all good people go.<hr/>
</body>
</html>
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ စာတစ္ေၾကာင္းအဆံုးလို႔သတ္မွတ္ျပီး <hr/> ထည့္ထားတဲ့စာသား အဆံုးမွာ မ်ဥ္းေၾကာင္းတစ္ေၾကာင္း ဆြဲထား
တာေတြ႔လိမ့္မယ္၊ အထက္က ဥပမာ မွာေတာ့ <hr/> ေလးခုပါေတာ့ မ်ဥ္းေလးေၾကာင္းေပါ့၊ <hr/> ကိုသံုးထားရင္ line break <br/> ကိုသံုးစရာမလို
ေတာ့ပါဘူး၊ HTML tag နဲ႔ ထည့္ထားတဲ့မ်ဥ္းေၾကာင္းေတြကို အရြယ္အစား နဲ႔ အေရာင္ခ်ိန္ညွိလို႔ရပါတယ္၊ ေနာက္ပိုင္းမွာ သင္ျပေပးပါမယ္၊
HTML Comments
HTML Doucment တစ္ခုေရးရင္း မွတ္သားစရာေပၚလာတယ္၊ မွတ္ခ်က္ထည့္စရာေပၚလာခဲ့တယ္ဆိုရင္ျဖင့္ အဲ့ဒီ့ HTML Document ထဲမွာပဲ မွတ္သား
ထားႏိုင္ပါတယ္၊ ေအာက္မွာ HTML Comment ထည့္တဲ့ ပံုကိုၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
hey what are you doing

<body>
</html>
အထက္က HTML Document ကို Run လိုက္ရင္ hey what are you doing ဆိုတဲ့ စာသားကိုေတြ႔ရမယ္၊ ဒါေပမယ့္ I am learning HTML
ဆိုတဲ့စာသားကိုေတာ့ မေတြ႔ရပါဘူး၊ အေၾကာင္းကေတာ့ <!—I am learning HTML --> ဆိုတဲ့စာသားက comment ျဖစ္ေနလို႔ပါ၊ အလုပ္လုပ္ေနရင္း
မွတ္သားခ်င္တာေတြရွိရင္ အဲ့ဒီ့ comment ထည့္တဲ့နည္းကိုသံုးျပီး မွတ္သားႏိုင္ပါတယ္၊ ေရးပံုကေတာ့  တို႔ ၾကားမွာ မွတ္သားလိုတဲ့
စာသားမွန္သမွ် ေရးရပါတယ္၊

html_2

1:41 AM HTML No comments

HTML heading
သတင္းစာေတြမွာ ေခါင္းစဥ္စားလံုးကိုအၾကီးနဲ႔ေရးၾကပါတယ္၊ ဒီလိုပဲ သင့္၀က္ဆိုကမွာလဲ ေခါင္းစဥ္စာလံုးေတြကို စာလံုးအၾကီးနဲ႔ ေရးလိုရပါတယ္၊ စာလံုး
အၾကီး ေတြကို 1 က ေန 6 အထိ တျဖည္းျဖည္း ေသးသြားတယ္၊ h1 က အၾကီးဆံုးျဖစ္ျပီး h6 က အေသးဆံုး၊ HTML Tag ေတြရဲ့သဘာ၀အတိုင္း သူတို႔အား
လံုး မွာ အဖြင့္အပိတ္ဆိုျပီးရွိၾကတယ္၊ ေအာက္က ဥပမာ ကို ၾကည့္၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<h1> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး </h1>
<h2> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h2>
<h3> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h3>
<h4> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h4>
<h5> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h5>
<h6> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h6>
</body>
</html>
အထက္က ဥပမာ ကို Run လိုက္ပါ၊ ဒါဆိုရင္ေတာ့ သင့္၀က္ဆိုက္စာမ်က္ႏွာမွာ မတူညီတဲ့ အရြယ္အစားရွိတဲ့ စာလံုးေတြေပၚလာမယ္၊ အဲ့ဒီ့ ကေန ေခါင္းစဥ္
စာလံုး ေတြကို ဘယ္ အရြယ္အစား သံုးခ်င္လဲ သံုးသင့္လဲ ဆိုတာကို နမူနာယူပါ၊ ေနာက္ပိုင္းေရးတဲ့အခါ က်ရင္ေတာ့ သင္ၾကိဳက္တဲ့ ေခါင္းစဥ္အရြယ္အစား
သံုးျပီးေရးႏိုင္တယ္၊ သတိထားရမွာက အဖြင့္အပိတ္ ႏွစ္ခုလံုးပါေအာင္ေရးဖို႔ပဲ၊
Headings Are Important
တခ်ဳိ႕ေတြက စာလံုးၾကီးရင္ျပီးေရာဆိုျပီး Strong Tag , Bold Tag နဲ႔ Font size ေတြ သံုးျပီး ေခါင္းၾကီးစာလံုးေတြကို ျပဳျပင္ၾကပါတယ္၊ ေခါင္းၾကီးစာလံုးရဲ့ ့
heading Tags ကိုေတာ့ မသံုးၾကေတာ့ဘူး၊ 72coder က အၾကံျပဳခ်င္တာကေတာ့ ေခါင္းစဥ္အတြက္ heading tag ေတြကိုပဲသံုးပါ၊ ဒါမွမဟုတ္ရင္ျဖင့္ေနာက္
ပိုင္း စာမ်က္ႏွာေတြအမ်ားၾကီးပါတဲ့ ဆိုက္ ၾကီးေတြကို CSS သံုးျပီး အလွဆင္ရင္ျပသနာျဖစ္တတ္ပါတယ္၊ ဒီ့အျပင္ heading Tag ေတြနဲ႔ ၀ိုင္းထားတဲ့စာ
သားေတြ ကို browser ကေတြ႔ရင္ အဲ့ဒီ့ heading tag မွာပါတဲ့စာသားရဲ့ ေရွ႕နဲ႔ ေနာက္မွာ ေနရာလြတ္ကိုအလုိေလွ်ာက္ခ်န္ေပးထားတယ္၊ ေနရာလြတ္ဆိုတာ
တျခား စာသားေတြမၾကဴးေက်ာ္လာႏိုင္ေအာင္မ်ဥ္တာေပးထားတာ၊ မ်ဥ္းကိုေတာ့မေတြ႔ရပါဘူး၊ ဒါေပသည့္ရွိပါတယ္၊
ေနာက္အရမ္းအေရးၾကီးတဲ့အခ်က္က Search enging ျဖစ္တဲ့ Google တို႔ Yahoo တို႔က သင့္ရဲ့ ဆိုက္ရွိ အေၾကာင္းအရာေတြကို ရွာေဖြတဲ့အခါမွာ သင့္၀က္
ဆိုက္ရဲ့ heading ေခါင္းစဥ္ကို မူတည္ျပီးရွာပါတယ္၊ ဒါေၾကာင့္ heading tag မသံုးရင္ Search engine က သင့္ဆိုက္ကိုရွာရတာ ခက္ခဲပါတယ္၊
သင့္ဆိုက္ကို ၀င္ေရာက္ေလ့လာသူေတြအေနနဲ႔လဲ ေခါင္းစဥ္ကို ရွာျပီး သူလိုအပ္တဲ့ အေၾကာင္းအရာ ဟုတ္လားမဟုတ္လားကိုအလြယ္တစ္ကူဆံုးျဖတ္ႏိုင္မွာပါ၊

အေရးၾကီးရင္ ၾကီးသလို heading tags ေတြကို ခ်ိန္ျပီးသံုးႏိုင္ပါတယ္၊ သိပ္အေရးၾကီးတယ္ဆိုရင္ျဖင့္ အေရးၾကီးတဲ့စာသားကို h1 နဲ႔ ေရး၊ ေခါင္းစဥ္မွန္
သမွ်ကိုေတာ့ heading tags ထည့္ျဖစ္ေအာင္ထည့္ ဒါမွ အသံုျပဳသူေတြက အေၾကာင္းအရာတစ္ခုကိုရွာမယ္၊ အဲ့ဒီ့ အေၾကာင္းအရာက သင့္၀က္ဆိုက္မွာ
ပါတယ္ဆိုရင္ Search Engine က သင့္၀က္ဆိုက္ကို အလြယ္ေလးရွာေတြ႔မွာ၊
HTML Link
HTML မွာ လင့္ေတြထည့္လို႔ရတယ္၊ ဥပမာ သင္ ရဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကေန အျခား ၀က္ဆိုက္စာမ်က္ႏွာကို လွမ္းညြန္းလို႔ရတယ္၊ လင့္ထည့္ဖို႔အတြက္
သံုးရတဲ့ HTML tag ကေတာ့ <a> tag ပါ၊ အဖြင့္ကို <a> လို႔ေရးျပီး အပိတ္ကိုေတာ့ </a> လို႔ေရးပါတယ္၊ ဥပမာ သင့္ဆိုက္မွာ 72coder.com ဆိုက္ကို
လင့္ခ်ိတ္မယ္ဆိုရင္ အဖြင့္ HTML Link tag ရဲ့အတြင္းမွာ ခ်ိတ္မယ့္ဆိုက္ရဲ့နာမည္ကိုေရးေပးရတယ္၊ ခ်ိတ္မယ့္ဆိုက္ရဲ့နာမည္ကိုေရးတဲ့အခါ href လို႔ေခၚတဲ့
hyper reference ကိုပါထည့္ရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<a href= “72coder.com”>ဒီဆိုက္ကိုသြားလည္ပါ</a>
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ျဖင့္ ဒီဆိုက္ကိုသြားလည္ပါဆိုတဲ့စာသားကို အျပာေရာင္နဲ႔ ေရးထားတာေတြ႔မယ္၊ အျပာေရာင္ရဲ့သေဘာကေတာ့
အဲ့ဒီ့စာသားမွာ လင့္ပါတယ္ ဆိုတဲ့သေဘာပါ၊ အဲ့ဒီ့စာသားကို ႏွိပ္လိုက္ရင္ (အင္တာနက္ခ်ိတ္ထားရင္) 72coder.com site ကို သင့္ကိုေခၚသြားလိမ့့္မယ္၊
ဒါကေတာ့ သင့္ဆိုက္မွာ လင့္ခ်ိတ္တဲ့ပံုပါ၊ သံုးတဲ့ HTML Tags က <a> နဲ႔ </a> တို႔ပါ၊ အဖြင့္ <a> ရဲ့အတြင္းမွာ href= “ ” လို႔ထည့္ေပးျပီး ႏွစ္ထပ္ေကာ္မာ
ရဲ့ ၾကားမွာေတာ့ သင္လင့္ခ်ိတ္လိုတဲ့ ဆိုက္ရဲ့နာမည္ကို ထည့္ရပါတယ္၊ “ဒိဆိုက္ကိုသြားလည္ပါ” ဆိုတဲ့စာသားကိုေတာ့ သင္စိတ္ၾကိဳက္ လိုအပ္တဲ့စာသားေရး
လို႔ရတယ္၊ အဲ့ဒီ့စာသားက ၀က္ဆိုက္စာမ်က္ႏွာမွာ ေပၚမယ့္စာသား၊
အထက္မွသံုးခဲ့ href = “ ” ကေတာ့ target link ျဖစ္ပါတယ္၊ သူ႔အေၾကာင္းကိုေတာ့ ေနာက္ပိုင္း HTML Link ေတြကို အေသးစိတ္ရွင္းျပရင္ ထည့္သြင္းရွင္းျပ
ေပးပါမယ္၊

html_1

1:41 AM HTML No comments

HTML Basic Form or Frame
HTML မွာ အေျခခံတည္ေဆာက္ပံုရွိတယ္၊ HTML ရဲ့ Frame လို႔ေခၚတယ္၊ HTML Document တစ္ခုကိုေရးတိုင္း HTML Frame
ကပါကိုပါရမယ္၊ ေအာက္မွာ အေျခခံ HTML Frame ကိုတည္ေဆာက္ပံုကို တဆင့္စီရွင္းျပမယ္၊
ပထမအဆင့္
ဒီအဆင့္မွာေတာ့ အခုေရးမွာက HTML Document ျဖစ္ေၾကာင္း ကိုေျပာတဲ့ Document type ဆိုတဲ့ Document အမ်ိဳးအစားကို HTML ကို
ဘာသာျပန္မယ့္ browser ကသိေအာင္ မိတ္ဆက္မယ္၊ ဒီအတြက္သံုးတဲ့ သေကၤသကေတာ့ <!DOCTYPE html> ပါ၊ <!DOCTYPE html> သေကၤသ
ကို သင္ေရးတဲ့ HTML Document တိုင္းရဲ့ ထိပ္ဆံုးမွာထည့္ေပးရပါတယ္၊ ဒါမွ အဲ့ဒီ့ စာမ်က္ႏွာကို ဘာသာျပန္မယ့္ web browser က ဘယ္လို Doucment
အမ်ိဳးအစားလဲဆိုတာကို သိျပီး လြယ္လြယ္ကူကူ ဘာသာျပန္ႏိုင္မယ္၊
ဒုတိယ အဆင့္
ဒီအဆင့္မွာေတာ့ အခုက စလို႔ HTML ဖိုင္ကိုစေရးပါပီလို႔ေၾကျငာ ဖို႔အတြက္ HTML Tags ကိုထည့္ေပးရမယ္၊ အဖြင့္နဲ႔ အပိတ္ ႏွစ္ခုရွိတယ္၊ ေအာက္မွာ
ထည့္ပံုကိုၾကည့္၊
<!DOCTYPE html>
<html>

</html>
အထက္မွာေတာ့ အဖြင့္နဲ႔ အပိတ္ HTML Tags ေတြကိုထည့္လိုက္တယ္၊ အပိတ္မွာ forwards slash (ေရွ႕ ကိုေစာင္းေနတဲ့ မ်ဥ္းေစာင္း ပါတာကို သတိျပဳပါ၊)

<html> နဲ႔ </html> တို႔ကိုေတာ့ web borwser က HTML ဖိုင္ကို <html> ဆိုတဲ့ ေနရာကစျပီး </html> အထိ အားလံုးက HTML ဖိုင္ျဖစ္ပါတယ္လို႔
အသိေပးလိုက္တာ၊ ေနာက္ပိုင္း ေရးသမွ် HTML Tags ေတြေကာ စာသားေတြေကာကိုပါ၊ <html> အဖြင့္နဲ႔ </html> အပိတ္တို႔ၾကားမွာေရးရမယ္၊
တတိယ အဆင့္
ဒီအဆင့္မွာေတာ့ HTML Doucment ရဲ့ ေခါင္းၾကီးပိုင္း ကိုသတ္မွတ္မယ္၊ ေခါင္းၾကီးပိုင္းျဖစ္တဲ့ heading ရဲ့ ကုိစားျပဳ HTML tags က အဖြင့္ <head> နဲ႔
အပိတ္ </head> တို႔ပါ၊ သူတို႔ကို <html> နဲ႔ </html> တို႔ၾကားထဲမွာထည့္ေရးရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
</head>
</html>
အထက္မွာေတာ့ ေခါင္းၾကီးပိုင္း သတ္မွာတဲ့ HTML tags ေတြျဖစ္တဲ့ အဖြင့္ <head> နဲ႔ အပိတ္ </head> တို႔ကိုေရးျပီးသြားပါပီ၊ သူတို႔ သာလွ်င္မက အျခား
မည္သည့္ HTML Tags ေတြကုိမဆို <html> နဲ႔ </html> တို႔ၾကားထဲမွာထည့္ေရးရမယ္၊
စတုတၳအဆင့္
ဒီအဆင့္မွာေတာ့ ေခါင္းစဥ္ကိုတပ္မယ္၊ ေခါင္း ၾကီးပိုင္းနဲ႔ ေခါင္းစဥ္နဲ႔ မတူပါဘူး၊ ေခါင္းစဥ္ Title တပ္ဖို႔အတြက္ သံုးရတဲ့ HTML Tags ကေတာ့ အဖြင့္
<title> နဲ႔ အပိတ္ </title> တို႔ပဲျဖစ္ပါတယ္၊ ေခါင္းစဥ္ Tags ေတြကိုေတာ့ ေခါင္းၾကီးပိုင္း Tags ေတြျဖစ္တဲ့ <html> နဲ႔ </html> တို႔ရဲ့ ၾကားမွာထည့္ရ
ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web page </title>
</head>
</html>
အထက္က ကုတ္မွာ ေခါင္းစဥ္ျဖစ္တဲ့ My Web Page ကို ေခါင္းစဥ္ tags ေတြျဖစ္တဲ့ <title> နဲ႔ </title> ရဲ့ၾကားမွာထည့္ထားတာကိုေတြ႔ရမယ္၊ ေခါင္းစဥ္
နဲ႔ ပတ္သတ္တဲ့ Element ကိုေတာ့ ေခါင္းၾကီးပိုင္း Tags ေတြျဖစ္တဲ့ <head> နဲ႔ </head> တို႔ရဲ့ ၾကားမွာ ထားကိုထားရမယ္၊
ပဥၥမ အဆင့္
ဒီအဆင့္ကေတာ့ သင္ရဲ့ ၀က္ဆိုက္တစ္ခုလံုးကိုေပၚေစတဲ့ အပိုင္းပါ၊ သင္ျမင္ေတြ႔ေနရတဲ့ ၀က္ဆိုက္မွန္သမွ်က ဒီအစိတ္အပိုင္းက ေနလာပါတယ္၊ သူ႔
ကိုေတာ့ body လို႔ေခၚတယ္၊ သူ႔ကိုေရးရာမွာ အသံုးျပဳတဲ့ HTML Tags ကေတာ့ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ပါ၊ သူတို႔ကိုေတာ့ ေခါင္းၾကီးပိုင္း
Tag ရဲ့ အဆံုးျဖစ္တဲ့ </head> ရဲ့ ေအာက္မွာထည့္ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
</body>
</html>
အထက္က HTML ဖိုင္မွာ <body> နဲ႔ </body> တို႔ကို ေခါင္းၾကီးပိုင္း Tag အဆံုးျဖစ္တဲ့ </head> ရဲ့ေနာက္မွာထည့္လိုက္ပါပီ၊ ေနာက္ပိုင္းသင့္
၀က္ဆိုက္ရဲ့စာမ်က္ႏွာမွာ ေပၚလိုသမွ် စာသား ပံု လင့္ ဇယား မွန္သမွ်ကို အဲ့ဒီ့ <body> အဖြင့္နဲ႔ </body> အပိတ္တို႔ၾကားမွာေရးပါတယ္၊
အထက္က ကုတ္ေတြရဲ့ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ၾကားမွာ စာတစ္ေၾကာင္းေလာက္ထည့္လိုက္မယ္၊ ထည့္မယ့္စာေၾကာင္းကို Paragraph
စာပိုဒ္ အေနနဲ႔ထည့္မယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<p> Howddy Buddy! This is my Site </p>
</body>
</html>
အထက္က HTML Document ကို Run လိုက္ရင္ေအာက္ပါအတိုင္းစာမ်က္ႏွာကိုေရရွိပါမယ္၊

အထက္က ပံုကေတာ့ ေရးခဲ့တဲ့ ကုတ္ေတြကို Run လိုက္ရင္ရမယ့္ Web page ပါ၊ (ပံုကေတာ့ ေသးေအာင္ခ်ံဳ႕ထားတာ)၊
အစိမ္းေရာင္ ျမားျပထားတဲ့ ေနရာကေတာ့ သင္ကုတ္ေတြေရးတုံးက ေခါင္းစဥ္ေနရာမွာ <title>My Web page</title> လို႔ေရးခဲ့တဲ့အပိုင္းကို
ကိုစားျပဳတဲ့ ေခါင္းစဥ္စာသားပါ၊ Web browser က ဘာသာျပန္ျပီးေခါင္းစဥ္ရွိရမယ့္ ေနရာျဖစ္တဲ့ ျမားစိမ္းျပထားတဲ့ ေနရာကိုပို႔လိုက္တာ။ ဒီေတာ့ အဖြင့္
<title> နဲ႔ အပိတ္ </title> တို႔ၾကားမွာ ဘာေရးေရး တကယ့္ ၀က္ဆိုက္မွာ ဖြင့္ၾကည့္ရင္ အဲ့ဒီ့ေရးထားတဲ့ စာသားေတြေပၚမယ့္ေနရာက
အစိမ္းေရာင္ျမားျပထားတဲ့ေနရာပါ၊
အနီေရာျမားျပထားတဲ့ေနရာကေတာ့ သင့္၀က္ဆိုက္ ရဲ့နာမည္ေပၚမယ့္ေနရာပါ၊ ဥပမာ 72coder.com က သင့္၀က္ဆိုက္နာမည္ဆိုရင္ အဲ့ဒီ့
အနီေရာင္ျမားျပထားတဲ့ေနရာမွာ 72coder.com လို႔ေပၚေနမယ္၊ အခုေတာ့ ကြန္ျပဴတာထဲမွာပဲ Run ထားတဲ့ အတြက္ ကြန္ျပဴတာထဲရွိ HTML Document
သိမ္းထားတဲ့ေနရာကိုပဲျပေနပါတယ္၊
အနက္ေရာင္ျမားျပထားတဲ့ ေနရာ (အဲ့ဒီ့အျဖဴေရာင္မ်က္ႏွာျပင္တစ္ခုလံုး) ကေတာ့ သင္ HTML Frame ကိုေရးတုန္းက အဖြင့္ <body> နဲ႔ အပိတ္ <body>
ၾကားမွာ ေရးခဲ့တဲ့ Howddy Buddy! This is my site ဆိုတဲ့စာသားေပၚေနမယ့္ေနရာပါ၊ သင္ အဖြင့္ <body> နဲ႔ အပိတ္ </body>
တို႔ၾကားထဲမွာဘာပဲေရးေရး အဲ့ဒီ့ ျမားအနက္ရွိတဲ့ အျဖဴေရာင္မ်က္ႏွာျပင္မွာေပၚမွာပါ၊ ဒီသင္ခန္းစာကိုေသခ်ာနားလည္ေအာင္ ေလ့လာပါ

6:38 AM HTML No comments

Html-1 သင္ခန္းစာ

html_1

HTML Basic Form or Frame
HTML မွာ အေျခခံတည္ေဆာက္ပံုရွိတယ္၊ HTML ရဲ့ Frame လို႔ေခၚတယ္၊ HTML Document တစ္ခုကိုေရးတိုင္း HTML Frame
ကပါကိုပါရမယ္၊ ေအာက္မွာ အေျခခံ HTML Frame ကိုတည္ေဆာက္ပံုကို တဆင့္စီရွင္းျပမယ္၊
ပထမအဆင့္
ဒီအဆင့္မွာေတာ့ အခုေရးမွာက HTML Document ျဖစ္ေၾကာင္း ကိုေျပာတဲ့ Document type ဆိုတဲ့ Document အမ်ိဳးအစားကို HTML ကို
ဘာသာျပန္မယ့္ browser ကသိေအာင္ မိတ္ဆက္မယ္၊ ဒီအတြက္သံုးတဲ့ သေကၤသကေတာ့ <!DOCTYPE html> ပါ၊ <!DOCTYPE html> သေကၤသ
ကို သင္ေရးတဲ့ HTML Document တိုင္းရဲ့ ထိပ္ဆံုးမွာထည့္ေပးရပါတယ္၊ ဒါမွ အဲ့ဒီ့ စာမ်က္ႏွာကို ဘာသာျပန္မယ့္ web browser က ဘယ္လို Doucment
အမ်ိဳးအစားလဲဆိုတာကို သိျပီး လြယ္လြယ္ကူကူ ဘာသာျပန္ႏိုင္မယ္၊
ဒုတိယ အဆင့္
ဒီအဆင့္မွာေတာ့ အခုက စလို႔ HTML ဖိုင္ကိုစေရးပါပီလို႔ေၾကျငာ ဖို႔အတြက္ HTML Tags ကိုထည့္ေပးရမယ္၊ အဖြင့္နဲ႔ အပိတ္ ႏွစ္ခုရွိတယ္၊ ေအာက္မွာ
ထည့္ပံုကိုၾကည့္၊
<!DOCTYPE html>
<html>
</html>
အထက္မွာေတာ့ အဖြင့္နဲ႔ အပိတ္ HTML Tags ေတြကိုထည့္လိုက္တယ္၊ အပိတ္မွာ forwards slash (ေရွ႕ ကိုေစာင္းေနတဲ့ မ်ဥ္းေစာင္း ပါတာကို သတိျပဳပါ၊)
<html> နဲ႔ </html> တို႔ကိုေတာ့ web borwser က HTML ဖိုင္ကို <html> ဆိုတဲ့ ေနရာကစျပီး </html> အထိ အားလံုးက HTML ဖိုင္ျဖစ္ပါတယ္လို႔
အသိေပးလိုက္တာ၊ ေနာက္ပိုင္း ေရးသမွ် HTML Tags ေတြေကာ စာသားေတြေကာကိုပါ၊ <html> အဖြင့္နဲ႔ </html> အပိတ္တို႔ၾကားမွာေရးရမယ္၊
တတိယ အဆင့္
ဒီအဆင့္မွာေတာ့ HTML Doucment ရဲ့ ေခါင္းၾကီးပိုင္း ကိုသတ္မွတ္မယ္၊ ေခါင္းၾကီးပိုင္းျဖစ္တဲ့ heading ရဲ့ ကုိစားျပဳ HTML tags က အဖြင့္ <head> နဲ႔
အပိတ္ </head> တို႔ပါ၊ သူတို႔ကို <html> နဲ႔ </html> တို႔ၾကားထဲမွာထည့္ေရးရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
</head>
</html>
အထက္မွာေတာ့ ေခါင္းၾကီးပိုင္း သတ္မွာတဲ့ HTML tags ေတြျဖစ္တဲ့ အဖြင့္ <head> နဲ႔ အပိတ္ </head> တို႔ကိုေရးျပီးသြားပါပီ၊ သူတို႔ သာလွ်င္မက အျခား
မည္သည့္ HTML Tags ေတြကုိမဆို <html> နဲ႔ </html> တို႔ၾကားထဲမွာထည့္ေရးရမယ္၊
စတုတၳအဆင့္
ဒီအဆင့္မွာေတာ့ ေခါင္းစဥ္ကိုတပ္မယ္၊ ေခါင္း ၾကီးပိုင္းနဲ႔ ေခါင္းစဥ္နဲ႔ မတူပါဘူး၊ ေခါင္းစဥ္ Title တပ္ဖို႔အတြက္ သံုးရတဲ့ HTML Tags ကေတာ့ အဖြင့္
<title> နဲ႔ အပိတ္ </title> တို႔ပဲျဖစ္ပါတယ္၊ ေခါင္းစဥ္ Tags ေတြကိုေတာ့ ေခါင္းၾကီးပိုင္း Tags ေတြျဖစ္တဲ့ <html> နဲ႔ </html> တို႔ရဲ့ ၾကားမွာထည့္ရ
ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web page </title>
</head>
</html>
အထက္က ကုတ္မွာ ေခါင္းစဥ္ျဖစ္တဲ့ My Web Page ကို ေခါင္းစဥ္ tags ေတြျဖစ္တဲ့ <title> နဲ႔ </title> ရဲ့ၾကားမွာထည့္ထားတာကိုေတြ႔ရမယ္၊ ေခါင္းစဥ္
နဲ႔ ပတ္သတ္တဲ့ Element ကိုေတာ့ ေခါင္းၾကီးပိုင္း Tags ေတြျဖစ္တဲ့ <head> နဲ႔ </head> တို႔ရဲ့ ၾကားမွာ ထားကိုထားရမယ္၊
ပဥၥမ အဆင့္
ဒီအဆင့္ကေတာ့ သင္ရဲ့ ၀က္ဆိုက္တစ္ခုလံုးကိုေပၚေစတဲ့ အပိုင္းပါ၊ သင္ျမင္ေတြ႔ေနရတဲ့ ၀က္ဆိုက္မွန္သမွ်က ဒီအစိတ္အပိုင္းက ေနလာပါတယ္၊ သူ႔
ကိုေတာ့ body လို႔ေခၚတယ္၊ သူ႔ကိုေရးရာမွာ အသံုးျပဳတဲ့ HTML Tags ကေတာ့ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ပါ၊ သူတို႔ကိုေတာ့ ေခါင္းၾကီးပိုင္း
Tag ရဲ့ အဆံုးျဖစ္တဲ့ </head> ရဲ့ ေအာက္မွာထည့္ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
</body>
</html>
အထက္က HTML ဖိုင္မွာ <body> နဲ႔ </body> တို႔ကို ေခါင္းၾကီးပိုင္း Tag အဆံုးျဖစ္တဲ့ </head> ရဲ့ေနာက္မွာထည့္လိုက္ပါပီ၊ ေနာက္ပိုင္းသင့္
၀က္ဆိုက္ရဲ့စာမ်က္ႏွာမွာ ေပၚလိုသမွ် စာသား ပံု လင့္ ဇယား မွန္သမွ်ကို အဲ့ဒီ့ <body> အဖြင့္နဲ႔ </body> အပိတ္တို႔ၾကားမွာေရးပါတယ္၊
အထက္က ကုတ္ေတြရဲ့ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ၾကားမွာ စာတစ္ေၾကာင္းေလာက္ထည့္လိုက္မယ္၊ ထည့္မယ့္စာေၾကာင္းကို Paragraph
စာပိုဒ္ အေနနဲ႔ထည့္မယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<p> Howddy Buddy! This is my Site </p>
</body>
</html>
အထက္က HTML Document ကို Run လိုက္ရင္ေအာက္ပါအတိုင္းစာမ်က္ႏွာကိုေရရွိပါမယ္၊

အထက္က ပံုကေတာ့ ေရးခဲ့တဲ့ ကုတ္ေတြကို Run လိုက္ရင္ရမယ့္ Web page ပါ၊ (ပံုကေတာ့ ေသးေအာင္ခ်ံဳ႕ထားတာ)၊
အစိမ္းေရာင္ ျမားျပထားတဲ့ ေနရာကေတာ့ သင္ကုတ္ေတြေရးတုံးက ေခါင္းစဥ္ေနရာမွာ <title>My Web page</title> လို႔ေရးခဲ့တဲ့အပိုင္းကို
ကိုစားျပဳတဲ့ ေခါင္းစဥ္စာသားပါ၊ Web browser က ဘာသာျပန္ျပီးေခါင္းစဥ္ရွိရမယ့္ ေနရာျဖစ္တဲ့ ျမားစိမ္းျပထားတဲ့ ေနရာကိုပို႔လိုက္တာ။ ဒီေတာ့ အဖြင့္
<title> နဲ႔ အပိတ္ </title> တို႔ၾကားမွာ ဘာေရးေရး တကယ့္ ၀က္ဆိုက္မွာ ဖြင့္ၾကည့္ရင္ အဲ့ဒီ့ေရးထားတဲ့ စာသားေတြေပၚမယ့္ေနရာက
အစိမ္းေရာင္ျမားျပထားတဲ့ေနရာပါ၊
အနီေရာျမားျပထားတဲ့ေနရာကေတာ့ သင့္၀က္ဆိုက္ ရဲ့နာမည္ေပၚမယ့္ေနရာပါ၊ ဥပမာ 72coder.com က သင့္၀က္ဆိုက္နာမည္ဆိုရင္ အဲ့ဒီ့
အနီေရာင္ျမားျပထားတဲ့ေနရာမွာ 72coder.com လို႔ေပၚေနမယ္၊ အခုေတာ့ ကြန္ျပဴတာထဲမွာပဲ Run ထားတဲ့ အတြက္ ကြန္ျပဴတာထဲရွိ HTML Document
သိမ္းထားတဲ့ေနရာကိုပဲျပေနပါတယ္၊
အနက္ေရာင္ျမားျပထားတဲ့ ေနရာ (အဲ့ဒီ့အျဖဴေရာင္မ်က္ႏွာျပင္တစ္ခုလံုး) ကေတာ့ သင္ HTML Frame ကိုေရးတုန္းက အဖြင့္ <body> နဲ႔ အပိတ္ <body>
ၾကားမွာ ေရးခဲ့တဲ့ Howddy Buddy! This is my site ဆိုတဲ့စာသားေပၚေနမယ့္ေနရာပါ၊ သင္ အဖြင့္ <body> နဲ႔ အပိတ္ </body>
တို႔ၾကားထဲမွာဘာပဲေရးေရး အဲ့ဒီ့ ျမားအနက္ရွိတဲ့ အျဖဴေရာင္မ်က္ႏွာျပင္မွာေပၚမွာပါ၊ ဒီသင္ခန္းစာကိုေသခ်ာနားလည္ေအာင္ ေလ့လာပါ

5:38 AM HTML No comments

HTML ကို စမ္းလုပ္ၾကည့္ရေအာင္

HTML ႏွင့္ CSS ကို က်ေနာ္နား လည္သလိုရွင္းျပေပးပါနည္ (ဆရာၾကီးမ်ားအတြက္မဟုတ္ပါ) ခုက်ေနာ္ ဆိုဒ္ထဲမွာ Table ေလးထဲ့ျပီး Software မ်ား Download ယူရန္ႏွင့္ ဗဟုသုတ Link တိိုျပီး ဘယ္နဲ႔ ညာမွာ
Software ေတြနဲ႔ ဝက္ဆိုဒ္ Link မ်ားကို ေဘာင္အတြင့္ထဲသို႔ထားရန္ HTML Code မ်ားေပးထားျပီး ရွင္းျပေပးပါမည္။ အသံုးျပဳပံုမွာ ေအာက္ပါ Code မ်ားကိုကူးယူျပီး သင့္၏ Blogger Dashboard ထဲမွ Layout

ကိုကလစ္ႏွိပ္ျပီးဝင္ပါ၊ ထို႔ေနာက္ Layout ထဲတြင္ သင္မည္္သည့္ေနရမွာ ဒီ Table ကိုမယ္ဆိုတာကိုစဥ္းစားေရြးျပီး Add Gadget မွာကလစ္ႏွိပ္ဝင္းျပီး ေပၚလာမဲ့ Box ထဲမွာ HTML/JavaScript ကိုေရြးပါ ေနာက္ထပ္ေပၚလာမဲ့ Box ထဲမွာ ေအာက္ပါ Code မ်ားကိုကူးယူျပီးထဲ့လိုက္ပါ၊ ေအာက္ပါ Table တြင့္ေလးေထာက္ေဘာင္ တစ္ခုစာသာနမူနာေပးထားပါတည္။

<style>
table,th,td
{
border:2px solid gray;
}
</style>
<table>

<tr><th>
<a href="ဝက္ဆိုဒ္လိပ္စာထဲ႔ရန္ေနရာ" target="_blank">ေခါင္းစဥ္ေနရာ</a>
</th></tr>

</table>

အထက္ပါ ပံုစံသည္ ယခုက်ေနာ္ ဆိုဒ္၏ ဘယ္ႏွင့္ညာ ဘက္တြင္ထဲထားေသာ နည္းျဖစ္သည္ ဤနမူသည္ ေအာက္ပါ ပံုစံထြက္မည္။

ေခါင္းစဥ္ေနရာ

ဒုတိယ ပံုစံ

<head>
<style>
table,th,td
{
border:2 px solid red;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>

</tr>
</table>
</body>
</html>

အထက္တြင္ျပထားေသာ Firstname ႏွင့္ Lasyname ေနရာကို မိမိ လိုေသာ စာသား ႏွင့္ ဆိုဒ္ထဲ့ရန္ျဖစ္သည္။ နမူသည္ ေအာက္ပါကဲ့သို႔ ေပၚမည္။

Firstname	Lastname

Website တစ္ခုဆြဲဖို႕အတြက္ HTML

2:57 AM HTML No comments

HTML

PHP ေရးၿပီးေနာက္ပိုင္း အခန္းဆက္စာမေရးၿဖစ္တာ ၁ ႏွစ္ေက်ာ္သြားပါၿပီ။အခု HTML အေၾကာင္းၿပန္ေရးၿဖစ္ရင္းနဲ႕ တစ္ဖန္အခန္းဆက္ၿပန္ေရးၿဖစ္ပါၿပီ။ HTML ကိုဖုိရမ္စတင္တုန္းက အနည္းငယ္ေရးခဲ့ဖူးၾကပါတယ္ ၿပီးတဲ့အထိေတာ့ မေရးၿဖစ္ခဲ့ၾကပါဘူး။အခုအစဆံုးေရးသြားပါမယ္။တစ္ခုေတာ့ရွိတယ္ဗ်..နည္းနည္းစိတ္ရွည္ၿပီးသည္းခံဖတ္ေပးၾကပါ။ ေရးသာေရးရတာ အခုေတာ္ေတာ္မ်ားမ်ားက HTML ဆိုတာကိုသိၿပီး တတ္ၿပီးၿဇစ္ေနၾကတယ္။ကဲ စကားမရွည္ေတာ့ပါဘူး။

Website တစ္ခုဆြဲဖို႕အတြက္ အေၿခခံအက်ဆံုးၿဖစ္တဲ့ HTML အေၾကာင္းေလးေၿပာၿပပါမယ္ Website တစ္ခုဖန္တီးတတ္ဖို႕အတြက္ဆို HTML ကိုမသိမၿဇစ္ သိရပါမယ္။အခုေၿပာမွာက Website(Static) ဖန္တီးဖို႕အတြက္ေၿပာမွာပါ စာသင္ၾကားၿခင္းသလိုမ်ိဳးမဟုတ္ဘဲ နားလည္လြယ္ေအာင္
တဆင့္ၿပန္လည္ေၿပာၾကားၿခင္းသေဘာၿဇင့္ေရးသားသြားမွာပါ သင္ခန္းစာေတြ စာအုပ္ေတြထဲကလို ဤ သည္ မလြဲၿဖစ္မွာမဟုတ္ပါ တခ်ိဳ႕ တခ်ိဳ႕ႈေသာအေၾကာင္းအရာမ်ားကို ကၽြန္ေတာ္နားလည္သလို ဖတ္သူလည္းနားလည္လြယ္ေအာင္ ေရးသြားပါမယ္ လိုအပ္ခ်က္ေတြရွိပါက နားလည္ေပးၾကကုန္…
HTML သင္ခန္းစာဆိုရင္လည္း ဆိုလို႕ရပါတယ္..ကဲ ကၽြန္ေတာ္တို႕အေၿခခံက စလိုက္ရေအာင္။

HTML ဆိုတာစေလ့လာမွာေတာ့ HTML ရဲ႕ အဓိပၸါယ္ေတာ့သိထားသင့္ပါတယ္ HTML ဆိုတာကေတာ့ Hyper Text Mark-up Language ပါ။
HTML ကိုေရးဖို႕အတြက္ ဘာေတြလိုအပ္သလဲဆိုရင္ေတာ့ HTML အတြက္ notepad ရွိရံုနဲ႕ေရးႏိုင္ပါတယ္။အၿခား HTML Editor ေတြ IDE ေတြအမ်ားၾကီးပါ။ဒါေပမယ့္ လက္ရွိဒီမွာအသံုးမ်ားေနတာေတာ့ Dreamweaver , FrontPage တို႕ပါ..Dreamweaver ကိုပိုၿပီးအသံုးမ်ားပါတယ္ ဒီေနရာမွာၾကားၿဖတ္ Dreamweaver နဲ႕ Frontpage တို႕ကြာၿခားတာကိုနည္းနည္းေၿပာၿပပါမယ္။

Dreamweaver ကေတာ့ ၿမန္မာမွာလက္ရွိ Website Developer ေရာ Website Designer ေရာအသံုးမ်ားတဲ့ Software တစ္ခုပါပဲ။HTML အတြက္ဆိုရင္ ဆိုပါစို႕ Table တစ္ခုဖန္တီးဖို႕အတြက္ဆို ၄ ၅ ေၾကာင္းေလာက္ေရးရမွာကို Dreamweaver နဲ႕ဆို ဒီဇိုင္း ဗ်ဳးဘက္ကေနၿပီး
Microsoft Word လို Insert Table ဆိုၿပီးထည့္လုိက္ရင္ ခဏေလးနဲ႕ၿပီးသြားပါတယ္။ေနာက္တစ္ခုက Language ေတာ္ေတာ္မ်ားမ်ားေရးသားႏိုင္ပါတယ္။(PHP,Javascript,CSS,HTML,etc..)

Frontpage ဆိုတာကေတာ့ Microsoft ကထုတ္တာပါ..သူ႕ကိုအရင္ကသံုးခဲ့ၾကပါတယ္။အခုေနာက္ပိုင္းေတာ့ ဒီမွာလူသိနည္းလာပါတယ္။ကၽြန္ေတာ္ေတာ့ အလုပ္တစ္ခု၀င္တုန္းက သံုးဖူးလိုက္တာပါ..သူက တကယ့္ကို Static ပါပဲ။ HTML , CSS ,etc..စတာေတြသာေရးလို႕ရၿပီး Server-side Languageေတြေရးသားလို႕မရပါ။သူ႕ကိုသံုးတတ္ဖို႕အတြက္ဆိုရင္ေတာ့ Microsoft ထုတ္ကုန္ၿဖစ္တဲ့အတြက္ Word ကိုသံုးတတ္ရင္အသံုးၿပဳလို႕ရပါတယ္။

အခု HTML ေလ့က်င့္ခန္းေလးစလိုက္ရေအာင္ HTML အတြက္ဘာ IDE သံုးမလဲဆိုရင္ေတာ့ မူလတန္းအရြယ္က စာလံုးေတြမွတ္မိေအာင္ အၾကိမ္ၾကိမ္ ခ်ၿပီးေရးခဲ့ရသလိုပါပဲ အလြယ္သံုးလို႕ရတဲ့ ဘာ IDE မွမသံုးဘဲ notepad နဲ႕ပဲစလိုက္ရေအာင္။HTML မွာ Tags ေတြနဲ႕ဖြဲ႕စည္းထားပါတယ္။ Tags ဆိုတာ
ဘာလဲဆိုရင္ေတာ့ ရိုးရိုးစာသားေတြနဲ႕ HTML code ေတြကိုခြဲၿခားလို႕ရေအာင္လုပ္ထားတာပါ ဥပမာဆိုရရင္ <b> This is bold </b> အဲ့လိုမွာ This is bold သည္ စာသားၿဖစ္ၿပီး <b> </b> က tags ေတြပါ..မ်ားေသာအားၿဇင့္Tag ေတြမွာအဖြင့္နဲ႕အပိတ္ရွိပါတယ္ အပိတ္မွာ / ေလးပါပါတယ္။

ပထမဆံုး HTML file

HTML ေရးဖို႕အတြက္ Windows Key + R ကိုတြဲႏွိပ္ပါ ၿပိးရင္ Run box ေပၚလာပါလိမ့္မယ္ အဲ့မွာ notepad ဆိုၿပီးရိုက္လိုက္ပါ notepad က်လာပါမယ္။
ဟုတ္ၿပီ စေရးၾကရေအာင္။

<HTML>
<HEAD>

</HEAD>
<BODY>

</BODY>
</HTML>

HTML ကိုစေရးေတာ့မယ္ဆုိရင္ ဒီလိုေရးပါတယ္။

<html> </html> အဲ့လို အဖြင့္ tag နဲ႕အပိတ္ tag ထဲမွာေရးရပါတယ္။အဲ့ tag ထဲမွာမွ ႏွစ္မ်ိဳးခြဲထားပါတယ္
Head and Body.

<html>
<head>
This is head part.
</head>
<body>
This is body part.
</body>
</html>

Head နဲ႕ Body ဘာကြာၿခားလဲဆိုတာေၿပာၿပပါမယ္။ Browser မွာ ေပၚေစခ်င္တာမွန္သမွ် Body tag ထဲမွာထည့္ၿပီးေရးရပါတယ္။Head Tag မွာေတာ့ Browser Title မွာေပၚေစခ်င္တာေတြ ေရးပါတယ္။အခုေနေၿပာၿပရင္ သိပ္နားလည္ခ်င္မွ နားလည္မွာပါ။ကၽြန္ေတာ္ ဥပမာေလးနဲ႕ရွင္းၿပပါမယ္။HTML တစ္ခုေရးၾကပါစို႕…

<html>
<head>
</head>
<body>
Hello! This is first example.
</body>
</html>

ပံုစံတက်ေရးေစခ်င္ပါတယ္။ဒီလိုေရးပါ Tag တစ္ခုအဖြင့္ကိုေရးၿပီးတာနဲ႕တစ္ခါတည္း အပိတ္အတြက္ပါေရးလိုက္ပါ။ဒါမွ အဖြင့္ အပိတ္က်န္ခဲ့တဲ့ Error ကင္းေစႏိုင္မွာပါ။ေရးၿပီးရင္ေတာ့ first.html (or) first.htm ဆိုၿပီးသိမ္းလိုက္ပါ။HTML ရဲ႕ File extension ကေတာ့ .html ဒါမွမဟုတ္ .htm ၿဖစ္ပါတယ္။ၿပီးရင္ေတာ့ အဲ့ေကာင္ကို Run ပါမယ္။သူ႕ ပံုေလးကေတာ့ IE ပံု ဒါမွမဟုတ္ FireFox ပံုေလးနဲ႕ၿဇစ္မွာပါ။ကိုယ္သြင္းထားတဲ့ Browser ေပၚမူတည္ပါတယ္။သူ႕ကိုဖြင့္လိုက္ပါ။

http://img132.imageshack.us/img132/8859/img00q.jpg

အခုလိုေပၚပါလိမ့္မယ္။အခု ခုနေရးထားတဲ့ example မွာလည္းထပ္ၿပင္ပါမယ္။ဒီတစ္ခါ Title ထည့္ပါမယ္။ခုနက head tag ထဲမွာဘာမွထည့္မေရးထားဘူးေနာ္.အခု head မွာထည့္ေရးပါမယ္။

<html>
<head>
<title> MYiD Group </title>
</head>
<body>
Hello! This is first example.
</body>
</html>

http://img577.imageshack.us/img577/2334/img01m.jpg

ပံုႏွစ္ခုကိုယွဥ္ၾကည့္ပါ အခုပံုမွာ ကၽြန္ေတာ္ၿမွားၿပထားတဲ့ေနရာမွာ ခုန Head tag ထဲမွာ title ဆိုတဲ့ tag နဲ႕ေရးထားတာေပၚေနပါလိမ့္မယ္။
<title> ဆိုတဲ့ Tag တစ္ခုသိသြားပါၿပီ။မွတ္စရာတစ္ခုပိုလာတာေပါ့ :P

မွတ္ဖို႔ေနာက္တစ္ခုထပ္တိုးရေအာင္ အခု Heading Tag ဆိုတာေၿပာပါမယ္။notepad အသစ္ဖြင့္လိုက္ပါ။
ၿပီးရင္ေတာ့ဒီကုတ္ေလးကိုရိုက္ထည့္လိုက္ပါ။

<HTML>
<HEAD>
<TITLE> MYiD Group </TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
</BODY>
</HTML>

ကိုယ့္စိတ္ၾကိဳက္နာမည္ေပးၿပီးသိမ္းလိုက္ပါ။ၿပီးရင္ သိမ္းလိုက္တဲ့ေကာင္ကို Run လိုက္ပါ။ Heading Style မ်ိဳးကြာၿခားတာကိုေတြ႕ရပါမယ္။
အလြယ္လမ္းလိုက္ၿပီး ကၽြန္ေတာ္ေရးထားတဲ့ ကုတ္ကို Copy/Paste မလုပ္ေစခ်င္။မွတ္မိေအာင္ ကိုယ္တိုင္ရိုက္ေစခ်င္ပါတယ္။ပထမဆံုးလုပ္ထားတဲ့ Example ကိုၿပန္ဖြင့္လိုက္ပါ။Right Click လုပ္ၿပီးOpen With>Notepad ကိုေရြးလိုက္ပါ။ၿပီးရင္ ခုနရိုက္ထားတဲ့ Hello!ဆိုတဲ့ေနာက္မွာဆက္ရိုက္ပါမယ္။
ဒီဟာေလးကိုဆက္ရိုက္ပါ။

<html>
<head>
</head>
<body>
Hello! This is first example. This is 2nd Example.
</body>
</html>

တစ္ဆက္တည္းေပၚေနပါမယ္။ဟုတ္ၿပီ ကၽြန္ေတာ္တို႕က အဲ့လိုတဆက္တည္းမေပၚေစခ်င္ဘူး 2nd example ဆိုတာကို ေအာက္တစ္ေၾကာင္းမွာ
ေပၚေစခ်င္တယ္။ေအာက္တစ္ေၾကာင္းဆင္းေစခ်င္တာပဲ လြယ္ပါတယ္ Enter ေခါက္ ၿပီးေအာက္တစ္ေၾကာင္းမွာေရးမွာေပါ့လို႕ထင္ေနလိမ့္မယ္။
HTML Enter ေခါက္ေရးလည္း တစ္ဆက္တည္းေပၚေနမွာပဲ။သူ႕ကို ေအာက္တစ္ေၾကာင္းဆင္းေရးခ်င္တယ္ဆို Tag တစ္ခုလိုလာၿပီ။ဟဲဟဲ Tag ေတြမွတ္ရမ်ားေနၿပီလား။စိတ္မပ်က္ပါနဲ႕ေရွ႕ဆက္ ဒီထက္မ်ားလာဦးမွာပါ(ၿဖဲေၿခာက္ထားတာ :P )ဟုတ္ၿပီ HTML မွာေအာက္တစ္လုိင္းဆင္းခ်င္တယ္ဆို
<br> ဆိုတဲ့ Tag ကိုသံုးပါတယ္။သူ႕ကို <br> </br> ဆိုၿပိးရိုက္စရာမလုိပါဘူး <br/> ဒါမွမဟုတ္ <br> ဆိုတာတစ္ခုတည္းနဲ႕ၿပီးပါတယ္။
အခု first example နဲ႕ This is 2nd Example. ဆိုတဲ့စာႏွစ္ခုၾကားထဲမွာ <br> ထည့္လိုက္ပါ။ဒီလိုေလးေပါ့။
Hello! This is first example.<br> This is 2nd Example

ၿပီးရင္ save လုပ္ၿပန္ Run ၾကည့္ပါ။အခုဆို ေအာက္တစ္ေၾကာင္းဆင္းသြားတာေတြ႕ရမွာၿဖစ္ပါတယ္။ကဲဒီေန႕ေတာ့ ဒီေလာက္ပါပဲ…မွတ္ရတာေလးေတြလည္းမ်ားသြားေလာက္ၿပီ။

Italic နဲ႕ bold Underline အေၾကာင္းဆက္ေၿပာပါမယ္။ဒီအေခၚေ၀ၚေတြကေတာ့လူေတာ္ေတာ္မ်ားမ်ားနဲ႕ရင္းႏွီးေနၿပီးသားပါ။
<b>This is bold.</b>
<i>This is Italic </i>
<u>This is Underline</u>

စာေတြကိုတစ္လိုင္းၿပီးတိုင္း line break နဲ႕မဆင္းခ်င္ဘူး Enter ႏွိပ္လိုက္ရံုနဲ႕ ေအာက္တစ္လိုင္းဆင္းခ်င္တယ္ဆိုရင္လည္း ရပါတယ္ အဲ့အတြက္ဆို
<pre> ဆိုတဲ့ tag ကိုသံုးပါတယ္ သူ႕က Space ၿခားတာေတြေရာ Enter ႏွိပ္တာေတြေရာ ေနာက္ Tabs ခုန္ထားတာေတြေရာသိပါတယ္ ဒါေပမယ့္
သူ႕ကို သံုးလိုက္ရင္ေတာ့ Font ပံုစံေၿပာင္းသြားပါတယ္။စမ္းၾကည့္လုိက္ရေအာင္

<HTML>
<HEAD>
<title>MYiD Group</title>
</HEAD>
<BODY>
<pre>Hello
Welcome to MYiD Group
Thanks </pre>
</BODY>
</HTML>

စာေတြကို စာပိုဒ္ပံုစံုေရးခ်င္တယ္ဆိုရင္ေတာ့ paragraph tag ကိုအသံုးၿပဳပါတယ္ <p> </p> ပါ။စမ္းေရးရေအာင္။

<HTML>
<HEAD>
<title>MYiD Group</title>
</HEAD>
<BODY>

<h2>MYiD Group</h2>
<p>Welcome to our donation group. www.myidgroup.org MYiD means Myanmar Youth IT Donation Group!</p>
<b>MYiD</b><br>
<i>Myanmar Youth IT Donation</i><br>
<u>We are donater!!</u>
</BODY>
</HTML>

ထပ္ကိန္းတင္တဲ့စာေရးရာမွာသံုးတဲ့ tag ကိုေၿပာၿပပါမယ္။ထပ္ကိန္းဆိုရာမွာ ဥပမာ 2nd Street ဆိုပါစို႕ nd ေလးက 2 ရဲ႕အေပၚမွာတင္ခ်င္တယ္ အဲ့လိုဆိုရင္ေတာ့ ဒီ Tag ကိုသံုးပါတယ္ <sup></sup> ေနာက္တစ္ခု base အေနနဲ႕သံုးတာပါ 10x ဆိုရင္ x ေလးက 10 ရဲ႕ေအာက္မွာရွိေနခ်င္
တယ္ဆိုရင္ေတာ့ <sub></sub> ဆိုတဲ့ tag သံုးပါတယ္။ကဲ ဥပမာေလးေရးလိုက္ရေအာင္။

<HTML>
<HEAD><TITLE>HTML Basic</TITLE></HEAD>
<BODY>

No ( ) 2<sup>nd</sup> Fl , blank Street.<br/>
10 <sub>x</sub>
</BODY>
</HTML>

tag ေတြမွာလည္း attribute ေတြထည့္ျပီး သံုးႏိုင္ပါတယ္။ attribute ဆိုတာကေတာ့ အဲဒီtag ပိုင္ဆိုင္တ့ဲ properties ပါ။tag တိုင္းမွာေတာ့ attribute မရိွပါဘူး။ဒါ့အၿပင္ tag တစ္ခုရဲ႕ေနာက္မွာ attribute တစ္ခုထက္မက လိုက္လို႕ရပါတယ္။အဲ့ဒါေတြကို ေနာက္ပိုင္းမွာေတြ႕ရပါမယ္ attribute ရွိတဲ့ tagတစ္ခုကိုဥပမာအေနနဲ႕စမ္းၾကည့္ရေအာင္
body tag ကိုစမ္းပါမယ္။

<HTML>
<HEAD><TITLE>HTML Basic</TITLE></HEAD>
<BODY bgcolor="pink">

HTML Basic HTML Basic HTML Basic

</BODY>
</HTML>

Body tag ရဲ႕ attribute တစ္ခုၿဖစ္တဲ့ bgcolor ကိုသံုးနည္းေလးပါ color ေတြကို စာသားအၿပင္ Hex code number နဲ႕လည္းသံုးလို႕ရပါတယ္။
ကာလာကုတ္ေတြကိုမသိဘူးဆိုရင္ေတာ့ အလြယ္ဆံုးနည္းကေတာ့ photoshop ဖြင့္ၿပီး color ကုတ္ေတြကိုကူးယူႏိုင္ပါတယ္။ကူးဖို႕အတြက္ကေတာ့ ဒီိလိုပါ။

http://img249.imageshack.us/img249/525/img02ig.jpg

Step 1 ၿမွားၿပထားတာကိုအရင္ႏွိပ္လိုက္ပါ။ choice color မွာကိုယ္ၾကိဳက္တဲ့ကာလာကိုေရြးပါ ၿပီးမွ Step 2 ၿမွားၿပထားရာမွာ ကာလာကုတ္ကိုကူးပါ ၿပီးမွ Body ရဲ႕ bgcolor မွာလာထည့္ပါမယ္။ # ေလးပါ ပါရပါမယ္။

<HTML>
<HEAD><TITLE>HTML Basic</TITLE></HEAD>
<BODY bgcolor="#cd1616">

HTML Basic HTML Basic HTML Basic

</BODY>
</HTML>

Pink ဆိုတဲ့ေနရာမွာ ကာလာကုတ္ေလးနဲ႕ထည့္လို္က္ပါတယ္..ေနာက္ေန႕မွဆက္ပါဦးမယ္။

အားလံုးပဲမဂၤလာပါ..ကဲမေန႕ကေၿပာခဲ့တဲ့ HTML ၿပန္စလိုက္ရေအာင္။အခု ပံုေတြနဲ႕လင့္ေတြအေၾကာင္းဆက္ေၿပာၿပပါမယ္။ကိုယ့္ရဲ႕ Webpage ေတြမွာပံုေလးေတြထည့္ခ်င္လာပါတယ္ဆိုပါစို႕ ဒီလိုဆိုရင္ ဘယ္ tag ကိုသံုးမလဲသိခ်င္လာလိမ့္မယ္ အဲ့လိုေတြအတြက္ဆိုရင္ေတာ့ <img> ဆိုတဲ့ tag ကိုသံုးပါတယ္။

<html>
<head>
<title> Insert Images & Links </title>
</head>
<body>

<img src="MYiD.jpg">

</body>
</html>

Src ဆိုတာကေတာ့ Browse သေဘာေပါ့ တစ္နည္းအားၿဖင့္ဆိုရရင္ လမ္းေၾကာင္းေရြးေပးတာပါ အဲ့ src ေနာက္မွာ မိမိထည့္လိုတဲ့ ပံုရွိတဲ့လမ္းေၾကာင္းကိုေရးေပးရပါတယ္ ပံုမွာလည္း jpg.png,gif စတဲ့မိမိပံုရဲ႕ extension ကိုမွန္ေအာင္ေရးေပးရပါတယ္။အဲ့လိုမွမဟုတ္ရင္ ပံုေပၚမွာမဟုတ္ပါဘူး။

http://img508.imageshack.us/img508/6903/img03b.jpg

ပံုထည့္ၿပီးၿပီဆိုေတာ့ ဆက္ၿပီး Links ေတြအေၾကာင္းေၿပာပါမယ္ Webpage တစ္ခုရဲ႕အဓိကက်တဲ့အခ်က္လက္ေတြမွာ Links ေတြလည္းပါပါတယ္။Links ဆိုတဲ့သေဘာကေတာ့ ဆိုပါစို႕ မိမိရဲ႕ဆိုက္မွာ Home About စသၿဖင့္ေပါ့ အဲ့လိုေလးေတြထားမယ္ Home မွာအေၾကာင္းရာတစ္ခု About ဆိုအေၾကာင္းရာတစ္ခုေရးမယ္ Home ကေန About ကိုၾကည့္ခ်င္တယ္ဆိုရင္ ဒီအတိုင္းဆိုၾကည့္လို႕မရပါဘူး ဒီေတာ့ၾကည့္လို႕ရေအာင္ links ခ်ိတ္ေပးရေတာ့မယ္။အဲ့လိုေနရာေတြအတြက္ဆိုရင္သံုးတာပါ။links ေတြသံုးပံုသံုးနည္းေရးၿပပါမယ္။

<html>
<head>
<title> Insert Images & Links </title>
</head>
<body>

<img src="MYiD.jpg">
<a href="imgaes.html">Home </a>
|
<a href="about.html">About</a>
</body>
</html>

<a> ဆိုတာေတာ့ လင့္အတြက္ tag ပါ. href ဆိုတာကေတာ့အခု src လိုပါပဲ။လမ္းေၾကာင္းေရြးတာပါ ဒီမွာေတာ့ကိုယ္ခ်ိတ္လိုတဲ့ links ကိုေရးေပးရပါတယ္။သူ႕မွာလည္း လမ္းေၾကာင္းမွန္ေအာင္ extension မွန္ေအာင္ေရးေပးရပါတယ္။ images.html ဆိုတာကေတာ့ခုနကၽြန္ေတာ္တုိ႕ပံုထည့္တဲ့ html page ပါ။အခု About အတြက္ page တစ္ခုၿပဳလုပ္ပါမယ္။

<html>
<head><title>About</title></head>
<body>

<h2>About Me!!!!</h2>

<b> This <i>is</i> About <u>page</u></b>
<br>
<p>Everybody thanks you</p>

<h4>Have a nice day!!!!!!!</h4>
<a href="images.html">Home</a>
|
<a href="about.html">About</a>
</body>
</html>

ဒီ page မွာေတာ့အရင္ေန႕ကေၿပာခဲ့တဲ့ tags ေတြၿပန္ထည့္ေပးထားပါတယ္။အခုဆိုဒီလိုေလးၿဖစ္သြားပါၿပီ။

http://img141.imageshack.us/img141/8850/img04r.jpg

http://img407.imageshack.us/img407/228/img05b.jpg

အခုဆို images နဲ႕ links ထည့္တာေတြသိသြားပါၿပီ။ဒီေလာက္ဆိုရင္ေတာ့ ပံုေတြနဲ႕စာေတြပါတဲ့ Webpage ေလးေတြၿပဳလုပ္ႏို္င္ပါၿပီ။

ေနာက္ထပ္တစ္ခုဆက္လိုက္ၾကရေအာင္။ဒီတစ္ခါ List tag ေတြအေၾကာင္းေၿပာပါမယ္။List ပိုင္းမွာ order list နဲ႕ unorder list ဆိုၿပီးရွိပါတယ္။နံပါစဥ္ေတြနဲ႕စီတာနဲ႕ နံပါတ္စဥ္မဟုတ္ဘဲစီတာပါ။Microsoft Word မွာဆိုရင္ေတာ့ Bullet ထည့္တဲ့သေဘာမ်ိဳးပါ List ရဲ႕ tag ကေတာ့ <li></li> ပါ။

Order List

Order List ရဲ႕ tag ကေတာ့ <ol> </ol> ၿဖစ္ပါတယ္။သူ႕ကလည္း attribute ရွိတဲ့ tagပါ။ဥပမာတစ္ခုစေရးလိုက္ရေအာင္။

<html>
<head></head>
<body>

<ol>
<li>This is list 1</li>
<li>This is list 2</li>
<li>This is list 3</li>
</ol>

</body>
</html>

http://img94.imageshack.us/img94/863/list1k.jpg

1 2 3 အစဥ္လုိက္စီထားတာေတြ႕ရပါလိမ့္မယ္။အခုတစ္ခု ၁ ၂ ၃ လိုအစဥ္လိုက္မစီဘဲ A B C နဲ႕စီတာေရးပါမယ္ အဲ့အတြက္ သူ႕ရဲ႕ type ဆိုတဲ့ attribute ကိုသံုးပါမယ္။
<ol type="A"> ဆိုရင္ A B C နဲ႕စီပါမယ္ ေနာက္ <ol type="a"> ဆိုရင္ေတာ့ abc အေသးနဲ႕စီပါမယ္ ေနာက္ <ol type="i"> ဆိုရင္ေတာ့ ေရာမဂဏန္း i ii iii နဲ႕စီပါမယ္ အဲ့ i ကို အၾကီး I နဲ႕ေရးလိုက္မယ္ဆိုရင္ေတာ့ I II III အဲ့လိုစီပါလိမ့္မယ္။ မိမိၾကိဳက္တ့ ဲနံပါတ္ကေန စၿပိးလည္း စီႏိုင္တယ္။ မိမိၾကိဳက္တ့ ဲ နံပါတ္ကစႏိုင္ဖို႕ start ဆိုတ့ ဲ attribute ကိုသံုးႏိုင္ပါတယ္။

http://img18.imageshack.us/img18/1135/list2c.jpg

Unorder List

နံပါတ္စဥ္လိုက္မစီေစခ်င္တဲ့အခါမ်ိဳးမွာ အသံုးၿပဳပါတယ္ သူ႕ရဲ႕ tag ကေတာ့ <ul></ul> ၿဖစ္ပါတယ္။

<html>
<head></head>
<body>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

http://img194.imageshack.us/img194/5313/list3o.jpg

သူ႕မွာလည္း attribute ရွိပါတယ္။ အခုလက္ရွိက list အားလံုး အလံုးေလးေတြနဲ႕ၿပေနပါတယ္ အဲ့ဒါကိုေၿပာင္းပါမယ္ သူ႕ကိုလည္း type ဆိုတဲ့ attribute သံုးရပါတယ္။
<ul type="square"> ေနာက္ <ul type="circle"> <ul type="disc"> type= Disc ဆိုရင္ေတာ့ နဂိုၿပတဲ့အလံုးေလးေတြအတိုင္းၿဇစ္သြားပါမယ္။
ေနာက္ listing တစ္ခုကေတာ့ definition list လို႕ေခၚပါတယ္ သူ႕ကိုအသံုးၿပဳမယ္ဆိုရင္ေတာ့ <dl></dl> tag နဲ႕သံုးပါတယ္ ဒါေပမယ့္သူ႕ကိုအသံုးၿပဳနည္းပါတယ္ မေၿပာတာ့ပါဘူး။

ဆက္ၿပီး text algin အေၾကာင္းေတြဆက္ရေအာင္ အခုဆိုရိုက္သမွ်စာအားလံုးက ဘယ္ဘက္ကိုကပ္ေနတာကိုေတြ႕ပါမယ္အခုအဲ့လိုဘက္ဘက္မွာပဲကပ္ေနတာမ်ိဳးမလိုခ်င္ဘူးစာသားေတြကိုေရႊ႕ေၿပာင္းမႈေတြၿပဳလုပ္ခ်င္တယ္ အဲ့အတြက္ေၿပာပါမယ္။ပထမဆံုးစာသားေတြကိုအလယ္ကိုေရႊ႕ပါမယ္ အဲ့အတြက္ <center> ဆုိတဲ့ tag ကိုသံုးပါတယ္။

<html>
<head><title>Text Align</title></head>
<body>

<center>
<h1>Basic HTML</h1>
</center>

</body>
</html>

Basic HTML ဆိုတာေလးက Browserရဲ႕အလယ္ကိုေရာက္ေနတာေတြ႕ရပါမယ္။ကဲစာသားေတြကိုေရႊ႕ၾကည့္လိုက္ၾကရေအာင္။

<html>
<head><title>Text Align</title></head>
<body>

<h1 align="center">Basic HTML</h1>

</body>
</html>

<html>
<head><title>Text Align</title></head>
<body>

<h1 align="right">Basic HTML</h1>

</body>
</html>

left ဆိုရင္ေတာ့ဘယ္ဘက္နားကိုေရႊ႕သြားပါလိမ့္မယ္။

ေနာက္ tag တစ္ခုကေတာ့ အားလံုးၾကိဳက္ၾကမယ္ထင္တယ္။ကၽြန္ေတာ္ HTML စသင္တုန္းကလည္း ဒီ tag ေလးသင္တဲ့အခါအရမ္းသေဘာက်ခဲ့ပါတယ္။အဲ့ဒါဘာလဲဆိုေတာ့ ေရွ႕ကေၿပာခဲ့သမွ်မွာ စာေတြကအကုန္လႈပ္ရွားမႈမဲ့
ေတြပါပဲ အခုကေတာ့ စာသားေတြေရႊ႕လ်ားမႈၿပဳလုပ္လို႕ရတဲ့ marquee ဆိုတဲ့ tag ပါ။

<html>
<head><title>Marquee</title></head>
<body>

<h1>Marquee Tags</h1>

<marquee>
This text is sample marquee text!
</marquee>

</body>
</html>

စာသားေလးေရႊ႕ေနတာေတြ႕ရပါမယ္။ Marquee မွာရိွတ့ဲ attribute ေတြကေတာ့

Behavior alternate ဘယ္ကေနညာ ၊ ညာကေန ဘယ္ျပန္သြား ပါတယ္။<marquee behavior="alternate">Alternate Moving</marquee>

Scroll သူက default value ပါ။ ဘယ္ကေန ညာ ၊ ညာဘက္ေရာက္သြားရင္ ဝင္သြားျပီး ဘယ္ဘက္ေန ျပန္စတာပါ။
<marquee behavior="scroll">Scroll Moving</marquee>

Slide သူကေတာ့ ဘယ္ကေနညာ ျပီးရင္ ရပ္သြားပါတယ္။ <marquee behavior="slide">slide Moving</marquee>

အဲ့ဒါေတြကေတာ့ behavior ဆိုတဲ့ attribute မွာရွိတဲ့ properties ေတြပါ။

Kyi Shaung

01-19-2011, 10:42 AM

မေရးၿဖစ္တာၾကာသြားၿပီ...ဆက္ေရးပါဦးမယ္ direction attribute အေၾကာင္းထပ္ေၿပာပါမယ္

left သူကေတာ့ default value ပါ။ ညာဘက္ကေန ဘယ္ဘက္ကိုသြားမယ္လို႕ ဆိုတာပါ။
<marquee direction="left" >Text Moving</marquee>

Right သူကေတာ့ ဘယ္ဘက္ကေန ညာဘက္ကိုသြားမယ္လို႕ဆိုတာပါ။ <marquee direction="right" > Text Moving </marquee>

up သူကေတာ့ ေအာက္ကေန အေပၚလာမယ္လို႕ဆိုတာပါ။ <marquee direction="up" > Text Moving </marquee>

Down သူကေတာ့ အေပၚကေန ေအာက္ဆင္းမယ္လို႕ဆိုတာပါ။ <marquee direction="down" > Text Moving </marquee>

Loop ဆိုတဲ့ attribute ကေတာ့ marqueeကိုကိုယ္ဘယ္ႏွစ္ၾကိမ္ေလာက္လုပ္မလဲဆိုတာ
သတ္မွတ္ေပးလုိ႕ရပါတယ္။

[number] သူကေတာ့ ကိုယ္ဘယ္ႏွစ္ၾကိမ္ marquee ကို လုပ္ခိုင္းမယ္ဆိုျပီး number တစ္လံုးထည့္ေပးရပါတယ္။ ၁ ဆို ၁ ၾကိမ္ပဲလုပ္မယ္ေပါ့။
<marquee loop="6" >Loop Moving</marquee>

Scrollamount attribute

[number] တစ္ခါေရြ႕ရင္ ဘယ္ေလာက္ pixel ေရႊ႕မလဲဆိုျပီး ထည့္ေပးရတာပါ။ ထည့္လိုက္တ့ဲ နံပါတ္မ်ားေလေလ ေဝးေဝးေရြ႕ ျမန္ျမန္သြားေလပဲ။
<marquee scrollamount="12">Text Moving</marquee>

Scrolldelay attribute

[number] သူကေတာ့ ဘယ္ေလာက္ၾကာရင္ ေရႊ႕မလဲဆိုတာပါ။ သူက millisecond နဲ႕ပါ။ 1000 လို႕ထည့္လိုက္ရင္ 1 second ၾကာမွ တစ္ခါေရြ႕မွာပါ။ သူကေတာ့ နံပါတ္မ်ားေလေလ ၾကာေလေလပါပဲ။
<marquee scrolldelay="1000">Text Moving</marquee>

Bgcolor attribute

[hex code] OR [Color Name] သူကေတာ့ marquee ရဲ႕ back color အေရာင္ေလးပါ။ #009933 ဆိုရင္ေတာ့ အစိမ္းေရာင္ေလးကို background ထားျပီး ေရႊ႕သြားမွာပါ။ <marquee bgcolor="#009933" >Text Moving</marquee>

အခုဆိုရင္ စာသားေလေတြေရြ႕ေနတာကိုၿပဳလုပ္ႏိုင္ၿပီၿဖစ္ပါတယ္။စာသားေရြ႕လ်ားမႈေတြၿပဳလုပ္ရတာေပ်ာ္ဖို႕ေကာင္းပါတယ္။
နက္ၿဖန္မွဆက္ပါဦးမယ္။

ကုိႀကည့္ေရွာင္ေရ.. Front Page က ကၽြန္ေတာ္သံုးခဲ့ဖူးသေလာက္ေတာ့ Only Static မဟုတ္ပါဘူး.. သူ႔မွာ Server side programming language တစ္ခုျဖစ္တဲ့ ASP ကိုထည့္ျပီး Run လုိ႔ရပါေသးတယ္.. ကၽြန္ေတာ္သိသေလာက္ေတာ့ အဲ့ေကာင္က Coding ပိုင္းကို ပိုအဆင္ေျပေစျပီး DreamWaver က ဒီဇုိင္းပိုင္းမွာ ပိုျပီးအားသာတယ္လို႔ သိရပါတယ္..။ ကၽြန္ေတာ္ပဲ အမွတ္မွားသလားေတာ့ မသိဘူး.. ေျပာျပပါဦး..

Kyi Shaung

01-27-2011, 02:13 AM

ASP နဲ႕ေတာ့စမ္းဖူးပါဘူး..... Front Page ေတာ့ သံုးရတာ အဆင္ေၿပဘူးဗ်ာ..Dreamweaver သံုးေနၾကမို႕နဲ႕တူတယ္...Frontpage သံုးရတုုန္းကဆို ေတာ္ေတာ္စိတ္ပ်က္ဖုိ႕ေကာင္းတယ္.....
I like DreamWeaver!!!!!!!! :)

Kyi Shaung

02-04-2011, 02:07 PM

ဒီေန႕ဆက္မယ့္အေၾကာင္းအရာကေတာ့ font အေၾကာင္းပါ။ပထမဆံုးေၿပာခ်င္တာကေတာ့ ၿမန္မာလိုရိုက္တဲ့အေၾကာင္းပါ။စလိုက္ရေအာင္။

<html>
<head><title>Font</title></head>
<body>
<font face="Zawgyi-One">
အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။
</font>
</body>
</html>

Save လုပ္ရင္ေတာ့ notepad ရဲ႕ေအာက္နားမွာရွိတဲ့ Encoding ကို Unicodeလို႕ေရြးေပးပါ။အဲ့ဒါဆိုရင္ေတာ့ၿမန္မာလိုေပၚပါၿပီ။

Font ေတြကိုေၿပာင္းလဲခ်င္တယ္ဆိုရင္ေတာ့ face ဆိုတဲ့ attribute ကိုအသံုးၿပဳပါတယ္။အၿခားလွပေသာမိမိစိတ္ၾကိဳက္ေဖာင့္ေတြေၿပာင္းလဲေလ့က်င့္ပါ။
အခုေတာ့အဲ့font ကို အေရာင္ဆိုးၾကည့္ၾကရေအာင္။

<html>
<head><title>Font</title></head>
<body>
<font face="Zawgyi-One" color="green">
အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။
</font>
</body>
</html>

အခုဆို font tag ရဲ႕ေနာက္ attributes တစ္ခုကိုသံုးလိုက္ပါတယ္။အဲ့ဒါကေတာ့ color ပါသူ႕ေနာက္မွာ ကာလာနာမည္ဒါမွမဟုတ္ ကာလာကုတ္နဲ႕ထည့္
ေပးရပါတယ္။ကာလာကုတ္အလြယ္ယူနည္းကိုအေရွ႕မွာေၿပာခဲ့ၿပီးပါၿပီ။မမွတ္မိေတာ့ရင္အေရွ႕ကိုၿပန္ၾကည့္ပါ။

<html>
<head><title>Font</title></head>
<body>
<font face="Zawgyi-One" color="green" size="+4">
အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။
</font>
</body>
</html>

ေနာက္တစ္ခုကေတာ့ size ဆိုတဲ့ attributes ပါ.သူကေတာ့ ကုိယ္လိုအပ္သလို font ရဲ႕ size ကိုေၿပာင္းတာပါ။ပံုမွန္က size=3 ပါ။ စာလံုး size
ၾကီးလိုလွ်င္ size=4 ကေန 7 ထိထည့္လို႕ရပါတယ္။ 1 ကေန 7 အထိရိွပါတယ္။ 3ကေတာ့ ပံုမွန္စာလံုးပါ။ ေနာက္ျပီး +1 ကေန +6 ရိွပါတယ္။
ပံုမွန္ကိုဘယ္ေလာက္တိုးမယ္ဆိုပါ။ +2 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 5 ျဖစ္သြားမွာပါ။ အဲလိုမ်ဳိးပဲ-1 ကေန -6 ထိရိွပါေသးတယ္။ -1 ဆိုရင္ ပံုမွန္က
3 ဆိုေတာ့ 2 ျဖစ္သြားမွာပါ။

<b> </b> စာလံုးေတြကို Bold လုပ္တာပါ

<blockquote> </blockquote> Tab ခုန္တဲ့ tag ပါ။ကိုယ့္စာပိုဒ္ေလးကိုတစ္သီးတစ္သန္႕လုပ္ခ်င္တဲ့အခါ မွာသံုးပါတယ္။

<i> </i> စာလံုးေတြကို italic လုပ္တာပါ

<small> </small> စာလံုးေတြကို ပံုမွန္ထက္ေသးေအာင္လုပ္တဲ့ေနရာမွာသံုးပါတယ္

<sup> </sup> စာလံုးေတြကို ထပ္ကိန္းသေဘာတင္တဲ့ေနရာမွာသံုးပါတယ္

<sub> </sub> စာလံုးေတြကို ေအာက္ခ်တဲ့ေနရာမွာသံုးပါတယ္။

<strike> </strike> သူကေတာ့ စာလံုးေတြကို အလယ္ကေနမ်ဥ္းသားတာပါ။

<pre> </pre> သူကေတာ့ Enter ေခါက္ရံုနဲ႕စာေၾကာင္းဆင္းတဲ့ပံုစံမ်ိဳးလိုခ်င္ရင္သံုးတာပါ သူ႕မွာ Space ေတြ Tab ခုန္တာေတြကအစသိပါတယ္။သူ႕ကိုသံုးရင္ေတာ့ font ပံုစံေၿပာင္းလဲသြားပါတယ္။

<tt> </tt> စာလံုးေတြကို Typing ရိုက္သလိုေပၚေအာင္လုပ္တာပါ။

<u> </u> သူကေတာ့စာလံုးေတြကို မ်ဥ္းသားတာပါ

<var> </var> Variable သတ္မွတ္တဲ့ Tag ပါ။

အေပၚမွာ link ခ်ိတ္တဲ့အေၾကာင္းေၿပာခဲ့ပါတယ္ အဲ့တုန္းက စာသားေတြကို link ခ်ိတ္တဲ့အေၾကာင္းပါ အခု ပံုေတြကို link ခ်ိတ္တဲ့အေၾကာင္းဆက္ေၿပာ
ပါမယ္။တကယ္ေတာ့ ပံုေတြကိုလင့္ခ်ိတ္တာလည္းလြယ္ပါတယ္။သူ႕မွာအသံုးၿပဳတာေတြက အေပၚမွာေၿပာခဲ့တဲ့ tag ေတြပဲအသံုးၿပဳတာပါ စလိုက္ၾကစို႕

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page2.html"><img src="img03.jpg"></a>

</body>
</html>

http://www.freeimagehosting.net/uploads/9e941068e1.jpg

လင့္ခ်ိတ္ထားတဲ့ပံုမွာ ေဘာင္ၿပာေလးနဲ႕ၿဖစ္ေနတာေတြ႕ရပါမယ္ စာေတြကိုလင့္ခ်ိတ္တုန္းကေတာ့ စာသားေအာက္မွာမ်ဥ္းသားထားတာေလးရွိတာမွတ္မိမွာပါ။အခုပံုကိုလင့္ခ်ိတ္ၿပီးပါၿပီ။

Kyi Shaung

02-06-2011, 03:57 PM

မခက္ခဲဘူးမဟုတ္လား Comment ေရးနည္းဆက္ေၿပာပါမယ္။

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page2.html"><img src="img03.jpg"></a>

This is show text!

</body>
</html>

စာသားႏွစ္ေၾကာင္ေရးလိုက္ပါတယ္ တစ္ခုကို အဲ့လို ေလးထဲမွာထည့္ေရးတာရယ္ေနာက္တစ္ေၾကာင္းကဒီတိုင္းေရးတာရယ္ပါ ဟုတ္ၿပီ Run ၾကည့္လိုက္ပါ။ This is show text ဆိုတဲ့တစ္ေၾကာင္းပဲေပၚေနတာေတြ႕ရပါမယ္။ ဘာလို႕ဆို Block Text ဆိုတာကို Comment ပိတ္ထားလို႕ပါ မွတ္ဖို႕
ေနာက္တစ္ခုတိုးလာၿပန္ၿပီ Comment ကို  အဲ့လိုေရးပါတယ္ အခုဆက္ၿပီး လမ္းေၾကာင္း src ဆိုတာေလးရွင္းေအာင္ ထပ္ရွင္းၿပပါမယ္. Src ေနာက္မွာ ပံုထည့္ရာမွာကိုယ္ထည့္လိုတဲ့ပံုရွိတဲ့လမ္းေၾကာင္းကိုေရြးေပးရပါတယ္ အခု img src=img03.jpg လို႕ေရးထားရာမွာ
ကၽြန္ေတာ္ထည့္ခ်င္တဲ့ပံုရယ္ ေနာက္ HTML file ရယ္ကလမ္းေၾကာင္းတစ္ခုေအာက္(ဖိုဒါေပါ့)မွာရွိေနလို႕ၿဖစ္ပါတယ္။အဲ့လိုပံုနဲ႕ HTML file က ဖိုဒါတစ္ခု
ေအာက္တည္းမွာရွိမေနဘဲတစ္ေနရာဆီမွာရွိေနတယ္ဆိုရင္ေတာ့တစ္မ်ိဳးေၿပာင္းေရးရပါမယ္။အခု ဥပမာ ကၽြန္ေတာ္ကပံုကို images ဆိုတဲ့ဖိုဒါတစ္ခုဖြဲ႕
လိုက္မယ္။အဲ့ထဲထည့္လုိက္မယ္ဆိုပါစို႕ အခုအေၿခအေနႏွစ္မ်ိဳးၿဖစ္သြားၿပီ ကၽြန္ေတာ္ထည့္ခ်င္တဲ့ပံုက images Folder ထဲေရာက္ေနၿပီ ကၽြန္ေတာ့္ရဲ႕ HTML file ကအၿပင္မွာရွိေနတယ္ အဲ့လိုအေၿခအေနမွာေနာ္ ပံုထည့္ခ်င္တဲ့အတြက္ ခုနလိုေရးလို႕မရေတာ့ဘူး ဆိုလိုတာက
<img src="img03.jpg"> ဆိုၿပီးေရးလို႕မရေတာ့ဘူးေရးလိုက္ရင္ ပံုကလမ္းေၾကာင္းတစ္ခုတည္းေအာက္မွာရွိမေနတဲ့အတြက္ေပၚမွာမဟုတ္ေတာ့ဘူး
ဒီေတာ့ဒီလိုေရးပါမယ္။ <img src="images/img03.jpg"> images/ ဆိုတာ images Folder ကိုလမ္းေခၚတာပါ အဲ့ဖိုဒါထဲကမွ ခုနေရႊ႕လိုက္တဲ့ img03.jpg ပံုကိုလမ္းေခၚလိုက္တာပါ။ေနာက္အေၿခအေနတစ္မ်ိဳး ဒီတစ္ခါ ပံုကအၿပင္မွာပဲရွိေနမယ္ HTML file က images Folder ထဲမွာဒီလိုေရးမယ္။
<img src="../img03.jpg"> ../ ဆိုတာကဖိုဒါအၿပင္ထြက္မယ္လို႕ဆိုလိုတာပါ။နားရွဳပ္သြားလားမသိဘူး ၿဖည္းၿဖည္းၿခင္းတစ္ခုစီလုပ္ၾကည့္ စမ္းၾကည့္ပါ
နားလည္သြားမွာပါ။image Tag မွာလည္း attribute ေတြရွိပါတယ္အခုပံုရဲ႕ size ကိုကိုယ္လိုသလိုခ်ံဳ ခ်ဲ႕မယ္။

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page2.html"><img src="img03.jpg" width="100px" height="100px"></a>

This is show text!

</body>
</html>
ခုနကုတ္ကိုပဲၿပင္လိုက္ပါ ၿပီးရင္ Save/ Run ၾကည့္လိုက္ပါပံုေသးသြားတာေတြ႕ရပါမယ္။ Width and Height ကိုအေထြထူးရွင္းမၿပေတာ့ပါဘူး

ေနာက္ေန႕မွဆက္ေရးပါဦးမယ္...အခုေတာ့ အိပ္ေတာ့မယ္ဗ်...အခုလိုစိတ္ရွည္ရွည္ေစာင့္ေပးတဲ့ သူမ်ားအားလံုးကို ေက်းဇူးတင္ပါတယ္

Kyi Shaung

02-08-2011, 02:16 PM

Image Align ေတြပါ

top = စာတစ္ေၾကာင္းကို ပံုရဲ႕ ေဘးနားက align မွာ အေပၚဆံုးမွာ ေဖာ္ျပေပးတာပါ။

bottom = သူကေတာ့ default ပါ။ စာသားကို ပံုေအာက္ဘက္မွာ ေဖာ္ျပတာကိုေတြ႕ရပါမယ္။

Middle = စာသားကို ပံုအလယ္မွာ မွာေပးတာပါ။

left = သူကေတာ့ ပံုကို page ရဲ႕ ဘယ္ဘက္ကိုပို႕လိုက္ျပီး စာသားအကုန္လံုးကို ပံုေဘးမွာ ေဖာ္ျပေပးတာပါ။

Right = သူကလည္း Left နဲ႕ အတူတူပါပဲ။ ညာဘက္ကို ပံုေရြ႕သြားျပီ စာသားအားလံုးကို ပံုရဲ႕ ဘယ္ဘက္မွာေဖာ္ျပေပးပါမယ္။

သူ႕ကို <img src="img03.jpg" width="150px" height="150px" align="right"> အဲ့လို align ရဲ႕ေနာက္မွာတစ္ခုၿခင္းစီထည့္ေရးၿပီး စမ္းသပ္ၾကည့္ပါ။အခုဆက္ၿပီးပံုမွာေပၚေနတဲ့(လင့္ခ်ိတ္တုန္းက ပံုမွာအၿပာေရာင္ေဘာင္ေလးေပၚေနတာ)ေဘာင္ေလးကိုမေပၚေအာင္ေရးပါမယ္။

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page1.html"><img src="img03.jpg" border=0></a>
MYiD

</body>
</html

http://img535.imageshack.us/img535/5642/is01.jpg

border မေဖ်ာက္ခင္ကပံုပါ

http://img823.imageshack.us/img823/6849/is02.jpg

ဒါကေတာ့ ေဘာင္္ေဖ်ာက္ၿပီးပံုပါ

Border ဆိုတာကိုသံုးလိုက္ပါတယ္။ border=0 ဆိုရင္ပံုမွာဘာေဘာင္မွမထည့္ဘူးလို႕ဆိုလိုတာပါ 1ဆိုရင္ေတာ့ေဘာင္ေလးၿပန္ေပၚလာတာေတြ႕ရမွာပါ
ဒီေလာက္ဆို ပံုနဲ႕လင့္ခ်ိတ္တာနဲ႕ပတ္သတ္ၿပီးေတာ္ေတာ္ေလးသိသြားေလာက္ပါၿပီ...............

Website language ဘာသာစကားေရြးရန္

Definition List

Recent Posts

Categories

ကလွစ္ခဲ့ပါ

Pages