ယခုဘေလာ႔ဂ္အား (ေ၀ဖန္ခ်က္ ၊ ထင္ျမင္ခ်က္) သတင္း၊ ေဆာင္းပါး၊ ဓါတ္ပံု၊ ကဗ်ာမ်ားေပးပို႔လိုပါက ဆက္သြယ္ရန္လိပ္စာ lion.nnt@gmail.com,cherrylandlay@gmail.com, Phone: 09428363601 ေပးပို႔သူမ်ားကိုလည္း အထူးပဲေက်းဇူးတင္ရွိပါတယ္။

Friday, 10 June 2011

Blog / HTML ေလ႕လာျခင္း (၁)

Close Your rating was successfully added.
Close Sorry, an error occurred while adding your rating.

Sunday, 13 March 2011 at 08:53

What is HTML?

HTML ဆိုတာ Web Pages ေတြကို ေပၚလာေအာင္ေရးထား- ဲ႕ Web Page ေရးနည္း
ဘာသာစကားတစ္မ်ိဳး- ဖစ္ပါတယ္ ။

HTML ရဲ႕ အရွည္ကေတာ႕ Hyper Text markup Language လို႕ေခၚပါတယ္ ။

Markup Language ဆိုတာကေတာ႕ Markup Tags ေလးေတြအမ်ားၾကီးန- ႕ ဖြဲ႕စည္းထားတာပါ ။

HTML ကေတာ႕ အဲသည္႕ Markup Tags ေလးေတြကို အသံုးျပဳျပီး Web Pages
အေနနဲ႔ေဖၚျပသြားတ- ပါ ။

HTML Tags

HTML markup tags ေတြကို အမ်ားအားျဖင္႕ HTML Tags လို႕ အလြယ္တကူေခၚၾကပါတ- ္။

ကဲဒါဆို HTML Tags ရဲ႕ စည္းကမ္းေလးေတြကိ- ေလ႕လာၾကည္႕ရေအာင္ ။

1. Angle brackets < > ေလးေတြနဲ႕ ခတ္ရပါ႕မယ္ ။ ( ဥပမာ ။ < html > )

2. အစ အဆံုး အတြဲေလးေတြနဲ႕ ရွိရပါ႔မယ္ ။ အဆံုးက / ေလးတစ္ခ်က္ခံရပါမ- ္။

(ဥပမာ ။ ….. ) အဲသည္႕အစဖြင္႕ ။အဆံုးပိတ္ေလးေတြ- ို Opening Tags and
Closing Tags လို႕ေခၚပါတယ္ ။

အဲသည္လို႕ HTML Tags ေလးေတြနဲ႕ HTML Documents ေလးေတြ လုပ္။
ေနာက္ဆံုးမွာေတာ႕ Web Pages ေတြအျဖစ္ ခ်ိတ္ဆက္ျပီး ပံုေပၚလာတာပါဘဲ ။

________________________________________
HTML Documents = Web Pages

Web Browser လို႕ေခၚတဲ႕ ( internet Explorer / Firefox ) စတဲ႕ browser ေတြကေတာ႕

အဲသည္႕ HTML documents ေတြကို ဖတ္ျပီး web pages အေနနဲ႕ေဖၚျပေပးတဲ-
browser ေတြပါဘဲ ။

အဲသည္႕ browser ေတြက HTML Tags ေတြကို မေဖၚျပေပးပါဘူး ။

အဲသည္႕ Tags ေတြကို ဘာသာျပန္ေပးျပီး Web pages အေနနဲ႕သာျပေပးတာပ- ။

ကဲ ဥပမာေလးနဲ႕ ၾကည္႕ရေအာင္ေနာ္ ။

<html>
<body>

<h1><b>ေတာ္၀င္ခ်ယ္ရီ</b></h- 1>

<p>တလြဲေတြလုပ္တတ္ေ- ာမိန္းမတစ္ေယာက္ျ- စ္ပါသည္။ အသက္၂၉ႏွစ္ရွိပါျ- ီ။</p>

</body>
</html>

Example Explained

* <html> ႏွင္႕</html> ၾကားထဲကစာသားေတြက- ု Web Pages အေနနဲ႕ျမင္ရမွာျဖ- ္ပါတယ္ ။
* <body> ႏွင္႕</body> ၾကားထဲကစာသားကေတာ- page မွာေရးထားတာျမင္ရ- ွာျဖစ္ပါတယ္ ။
* <h1> ႏွင္႕</h1> ေခါင္းစဥ္အေနနဲ႕ျ- င္ရမွာျဖစ္ပါတယ္ ။ <b> </b> bold
လုပ္ထားျခင္းျဖစ္- ါသည္။
* <p> ႏွင္႕ </p> စာပိုဒ္အေနနဲ႕ျမင- ရမွာျဖစ္ပါတယ္။

ေတာ္၀င္ခ်ယ္ရီ

တလြဲေတြလုပ္တတ္ေသ- မိန္းမတစ္ေယာက္ျဖ- ္ပါသည္။ အသက္၂၉ႏွစ္ရွိပါျ- ီ။

ကဲ ေအာက္မွာ ဘယ္အရာေတြက ဘာအတြက္သံုးလဲ ေလ႕လာၾကည္႕ရေအာင္- နာ္။

HTML ေခါင္းစဥ္ကို

HTML ေခါင္းစဥ္ကို <h1> to <h6> tags.ေလးေတြနဲ႕သတ္မွတ- ္တယ္ ။

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

This is a heading
This is a heading
This is a heading

HTML Paragraphs

HTML စာပိုဒ္ကိုေတာ႕ <p> </p> tag နဲ႕သတ္မွတ္ပါတယ္ ။

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

HTML Links

HTML Links ေတြကိုေတာ႕ <a> </a> tag နဲ႕ခ်ိတ္ဆက္ပါတယ္ ။

Example

span style="color: #ff0000;">a
href="http://www.w3schools.com"&gt;လင္႕ခ်ိတ္ရင္ေပၚခ- င္တဲ႕နာမည္ကို
ဒီမွာေရးပါ</a>

HTML Links
HTML Links ေတြကိုေတာ႕ tag နဲ႕ခ်ိတ္ဆက္ပါတယ္ ။
Example
လင္႕ခ်ိတ္ရင္ေပၚခ- င္တဲ႕နာမည္ကို ဒီမွာေရးပါ

HTML Images

HTML ပံုေတြ ထည္႕ခ်င္ရင္ေတာ႕ <img> </image> tag. နဲ႕အသံုးျပဳပါ ။

<img src="w3schools.jpg" width="104" height="142" > ၏

(အက်ယ္ ။ အျမင္႕ကို လဲၾကိဳက္ႏွစ္သက္ရ- ခ်ိန္လို႕ရပါတယ္ ။ ထည္႕တဲ႕
ပံုစံေလးကိုသာေသခ- ာေလ႕လာထားပါ) ။

HTML Elements
An HTML element ဆိုတာကေတာ႕ အစ Tag နဲ႕ အဆံုး Tag ရွိကိုရွိရပါတယ္ ။

HTML Elements

An HTML element ဆိုတာကေတာ႕ အစ Tag နဲ႕ အဆံုး Tag ရွိကိုရွိရပါတယ္ ။

Start tag *

Element content

End tag *

<p>

This is a paragraph

</p>

<a href="default.htm" >

This is a link

</a>

<br />

* The start tag is often called the opening tag. The end tag is often
called the closing tag.

HTML Element Syntax

* An HTML element starts with a start tag / opening tag
* An HTML element ends with an end tag / closing tag
* The element content is everything between the start and the end tag
* Some HTML elements have empty content
* Empty elements are closed in the start tag
* Most HTML elements can have attributes

<br />

သည္ element ကေတာ႕ အဆံုးမရွိတဲ႕ element တစ္ခုျဖစ္ပါတယ္ ။ တစ္လိုင္းဆင္း
လုပ္ခ်င္ရင္ သံုးပါတယ္ ။ သူဟာ အဆံုးမရွိတဲ႕ element ျဖစ္တဲ႕အတြက္ေၾကာ- ္႕
သူ႕ကိုေရးရင္ start tag ထဲမွာ တင္ / ေလး ခံေရးလိုက္ပါတယ္ ။
<br />

No comments:

Post a Comment

သူငယ္ခ်င္းတို႔....အျမင္ေလးေတြေရးေပးခဲ႔ပါ။