Thursday, April 23, 2015

Basic Html (2)

Lesson (2)
(2) HTML Paragraphs <p>

စာပိုဒ် ခွဲတဲ့အခါ HTML Paragraphs ကိုသုံးမယ်။

The HTML <p> element defines a paragraph.

စာပိုဒ်ကို <p> နဲ့ </p> အကြားရေးမယ်။

Example

<p>This is a paragraph</p>

<p>This is another paragraph</p>

- ဒီနေရာမှာ စာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။

- ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။

Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။

ကဲ လက်တွေ့ကြည့်ရအောင်.....

<p>HTML is a markup language for describing web documents (web pages).
  HTML stands for Hyper Text Markup Language.
    A markup language is a set of markup tags.
   HTML documents are described by HTML tags.
     </p>
<p>- ဒီနေရာမှာစာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။
 -ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။
  -Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။</p>

အပေါ်က Code တွေကို Notepad ပေါ် Copy ယူပြီး ။ Save as လုပ်ပါ။

Save as လုပ်နည်းကိုပြန်ပြောမယ်။

file name = prg.html (prg နေရာမှာကြိုက်တာရေး။ .html ကတော့ ပြောင်းလို့မရ)

Save as type = All Files

Encoding= Unicode ကို ယူမယ်(မြန်မာစာလုံးပါနေ၍)

file ကိုsave ထားတဲ့နေရာမှာရှာပြီး Run ကြည့် ။

--ဒီလိုပေါ်ပါမယ်။

ပထမစာပိုဒ်က ဝါကျ (၄)ကြောင်းစလုံးဆက်နေသလို ဒုတိယစာပိုဒ်က ဝါကျ(၃)ကြောင်းလည်း တဆက်တည်းဖြစ်နေပါလိမ့်မယ်။

HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language.A markup language is a set of markup tags.HTML documents are described by HTML tags.

- ဒီနေရာမှာ စာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။- ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။

ကိုယ်လိုချင်တာက ဝါကကျတစ်ကြောင်းချင်းစီဆိုရင် ဝါကျတစ်ကြောင်းဆုံးရင်Enter ခေါက်တယ်မဟုတ်လား။အဲဒီ Enter ခေါက်တဲ့နေရာမှာ teg<br>ကို ထည့်ယုံလေးပါ။

ကြည့်ရအောင်..

<html>
<p>HTML is a markup language for describing web documents (web pages).<br>
    HTML stands for Hyper Text Markup Language.<br>
    A markup language is a set of markup tags.<br>
    HTML documents are described by HTML tags.<br>
     </p>
<p>- ဒီနေရာမှာ စာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။<br>
- ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။<br>
Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။<br>
</p>
</html>

အပေါ်ကCode ကို Notepad ပေါ် Copy ယူပြီး ။ Save as လုပ်ပါ။ Run ကြည့် ။

မှတ်ရန် - teg <br> တစ်ခုဟာ Enter တစ်ကြိမ်ခေါက်တာနဲ့ညီမျှတယ်။

==============================================
(၃) Html Horizontal Line <hr>

The HTML <hr> element defines a horizontal line .

- Teg <hr> မှာလည်း End teg </hr> ထည့်ရန်မလို။

ရေညီမျည်းတစ်ကြောင်း အတွက် <hr> တစ်ခုပါ။

ကဲ ..ကိုယ်တိုင်လက်တွေ့ Code ရေးပြီး လေ့ကျင့်လိုက်ပါ။

ဦးအေးမင်း(23-4-2015)

=>>ဆက်လက်ဖော်ပြပါမည်။

Tuesday, April 21, 2015

Basic Html Codes

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

အာသီသစကား

Blog နှင့် Web Site များ ဖန်တီးရေးသားနိုင်ဖို့ Google မှထောက်ပံ့ပေးသည့် Blogger တို့ကဲ့သို့သောအဆင်သင့်ပြု လုပ်နိုင်သော Server ပေါင်းများစွာရှိ၏ ။

သို့သော် မိမိ၏ Blog နှင့် Web Site များကို မိမိလိုချင်သည့်ပုံစံရရန်အတွက်မူ Html code ကို အခြေခံမျှ နားလည် တတ်ထားသင့်ပေ၏။

တခြားတိုင်းနှင့်ပြည်နယ်များတွင်တော့မပြောတတ်။ ထားဝယ်ကွန်ပြူတာတက္ကသိုလ်မှာ ၂၀၀၃/၂၀၀၄ ခုနှစ်များတွင်တက်ခဲ့သော ကျောင်းသားများ Html ကိုတော့ သင်ပါရဲ့ အမှန်တကယ် Run လို့မရဘူးဆို့လို့.. ဒီ Post ကို ရေးသားတင်ဆက်ခြင်းဖြစ်ကြောင်းပါ။

ဤသင်ခန်းစာဖြင့် တစုံတစ်ယောက်ကို အကျိုးဖြစ်ထွန်း စေခဲ့လျှင်ဖြင့် ရေးရကျိုးနပ်ပေပြီ။

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Basic Html (Hyper Text Markup Language )

HTML မိတ်ဆက်

- HTML stands for Hyper Text Markup Language

Html = Hyper Text Markup Language

Code များရေးဖို့ လိုအပ်သောအရာများ

====================

(၁) Notepad (ကွန်ပြူတာမှာဒီလိုရှာ =>Start > All Progams > Accessories > Notepad)

(၂) Web Browser များ ( eg. Inter Explorer , Mozilla Firefox ...စသည်ဖြင့်)

ဒါတွေက ကွန်ပြူတာwindow တွေမှာပါပြီးသား။

==============================

HTML document တွေကို HTML tags များ နဲ့ ဒီလိုဖော်ပြပါတယ်။

<tagname>content</tagname>

contentနေရာမှာ မိမိကြိုက်တာရေးသွင်း

ဒီနေရာမှ အချိန်တိုအတွင်း Blogger ကိုအသုံးပြုပြီး Web/Blog ဖန်တီးနိုင်ဖို့ Web Page အပေါ်ခြေခံထားရှင်းလင်းမှာဖြစ်တယ်။

Tagname အမျိုးမျိုး

-----------------------

1 - The DOCTYPE declaration defines the document type to be HTML- <!DOCTYPE html>

2- The text between <html> and </html> describes an HTML document

3 - The text between <head> and </head> provides information about the document

4 - The text between <title> and </title> provides a title for the document

5 - The text between <body> and </body> describes the visible page content

6 - The text between <h1> and </h1> describes a heading

7 - The text between <p> and </p> describes a paragraph.....

စသည်ဖြင့် Tag ပေါင်းများစွာရှိပါတယ်။

အထက်က Tagname တွေမှာ (1)(2)(3)(4) က Web page ပေါ်မှာ မမြင်ပါ။

ဥပမာ -

The head Element

head element မှာတော့ page နဲ့ဆိုင်တဲ့ information တွေပါပါမယ်။ အဲဒါတွေကို page မှာတော့ ပြပေးမှာ မဟုတ်ပါဖူး။

browser နဲ့ search engine spider တွေအတွက် information တွေပါ။

ဥပမာ title element ဆိုရင် browser ရဲ့ title bar မှာ page ရဲ့ ခေါင်းစဉ်ကိုပြပေးမှာပါ။

The title Element အပေါ်က code မှာ <title>Untitled Document</title> လို့ပါပါတယ်။

အဲလိုဆိုရင် browser ရဲ့ title bar မှာ “Untitle Document” လို့ ပြပေးမှာပါ။

ပုံတွင်ရှု-

ကဲ သင်ခန်းစာကိုစလိုက်ကြရအောင်

===================================================

သင်ခန်းစာ(၁)

ဒီသင်ခန်းစာမှာ စာလုံး(Text ; font ) တွေနဲ့ ဆိုင်တဲ့ Tag တွေအကြောင်းစပြောမယ်။

- Html Elements များ(Words) ကို Start tag <tagname> နဲ့ End teg</tagname>

အကြားရေးရမယ်။

<tagname>content</tagname>

<p>My first HTML paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

(၁)HTML Headings ( ခေါင်းစဉ်များအတွက် စာလုံးအရွယ်အစားHtml)

------------------------------------------------------------------------------

HTML headings များအတွက် <h1> ,<h2> ,<h3> ,<h4> ,<h5> ,<<h6>

ဆိုတဲ့ tags ၆ မျိုးရှိပါတယ်။

<h1> teg က font size အကြီးဆုံးဖြစ်ပြီး <h6> teg ကအငယ်ဆုံးဖြစ်ပါတယ် ။

Heading Code တွေကို ဒီလိုရေးမယ်။

<h1>Heading h1 </h1>

<h2>Heading h2 </h2>

<h3>Heading h3 </h3>

<h4>Heading h4 </h4>

<h5>Heading h5 </h5>

<h6>Heading h1 </h6>

ကဲ..Notepad ပေါ်မှာ ဒီလိုလေးချရေးလိုက်မယ်

<!DOCTYPE html>
<html>
<body>

<h1>
This is heading 1</h1>
<h2>
This is heading 2</h2>
<h3>
This is heading 3</h3>
<h4>
This is heading 4</h4>
<h5>
This is heading 5</h5>
<h6>
This is heading 6</h6>
</body>
</html>

အောက်ဖက်ညာထောင့် ကို ဆွဲယူ၍ Box ကိုချဲ့ထုတ်နိုင်သည်။

ပြီးရင် file ကို Save As လုပ်မယ်။ Web Browser နဲ့ Run မှာဆိုတော့ ဒီအပိုင်းကအရေးကြီးဆုံးအပိုင်းဖြစ်တယ်။

= html file Save As လုပ်နည်း =

File > Save As အဆင့်ဆင့် ကလစ်တဲ့အခါ Save As box ပေါ်လာမယ်။

File ကိုရှာရလွယ်အောင် Desktop ပေါ်မှာ Save ပါ ။

ဒီBox မှာ File name: ကို name.html (name နေရာမှာ နှစ်သက်ရာအမည် ။ အမည်နောက်မှာ dot html " .html "ဖြစ်ပါစေ )

Save as type : ကို All Files မှာထား ။

Encoding: UTF8 မှာထား။

သို့သော် မြန်မာစာလုံးတွေပါလာရင်တော့ Unicode ကိုရွေး။

ကဲ ..Save ကို နှိပ်ချလိုက်တော့။ Result ကိုကြည့်ဖို့ Files Save ထားတဲ့ Desktop ပေါ်မှာလိုက်ရှာ။

Mozilla Firefox browser သို့မဟုတ် Chrome browser icon နဲ့ တွေ့ ရမယ် ။

ကဲ ဒီ icon ကိုဖွင့်လိုက် ဒီလိုတွေ့ရမယ် ။

Pages

Video Category

Thursday, April 23, 2015

Basic Html (2)

Tuesday, April 21, 2015

Basic Html Codes

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Popular Posts