Basic Html Codes
အာသီသစကား
Blog ႏွင္႔ Web Site မ်ား ဖန္တီးေရးသားႏိုင္ဖို႔ Google မွေထာက္ပ႔ံေပးသည္႔ Blogger တို႔ကဲ႔သို႔ေသာအဆင္သင္႔ျပဳ လုပ္ႏိုင္ေသာ Server ေပါင္းမ်ားစြာ႐ွိ၏ ။
သို႔ေသာ္ မိမိ၏ Blog ႏွင္႔ Web Site မ်ားကို မိမိလိုခ်င္သည္႔ပံုစံရရန္အတြက္မူ Html code ကို အေျခခံမွ် နားလည္ တတ္ထားသင္႔ေပ၏။
တျခားတိုင္းႏွင္႔ျပည္နယ္မ်ားတြင္ေတာ႔မေျပာတတ္။ ထား၀ယ္ကြန္ျပဴတာတကၠသိုလ္မွာ ၂၀၀၃/၂၀၀၄
ခုႏွစ္မ်ားတြင္တက္ခဲ႔ေသာ ေက်ာင္းသားမ်ား Html ကိုေတာ႔ သင္ပါရဲ႕ အမွန္တကယ္ Run လို႔မရဘူးဆို႔လို႔..
.
ဒီ Post ကို ေရးသားတင္ဆက္ျခင္းျဖစ္ေၾကာင္းပါ။
ဤသင္ခန္းစာျဖင္႔ တစံုတစ္ေယာက္ကို အက်ိ ဳ းျဖစ္ထြန္း ေစခဲ႔လွ်င္ျဖင္႔ ေရးရက်ဳိးနပ္ေပၿပီ။
အမွန္တကယ္လိုအပ္ေနသူမ်ား Comment ေပး၍ ေတာင္းဆိုလွ်င္ တိုက္႐ုိက္ Tag ေပးပါမည္။
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
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>
ေအာက္ဖက္ညာေထာင္႔ ကို ဆြဲယူ၍ 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 icon နဲ႕ ေတြ႔ ရမယ္ ။
ကဲ ဒီ icon ကိုဖြင္႔လိုက္ ဒီလိုေတြ႕ရမယ္ ။
အာသီသစကား
Blog ႏွင္႔ Web Site မ်ား ဖန္တီးေရးသားႏိုင္ဖို႔ Google မွေထာက္ပ႔ံေပးသည္႔ Blogger တို႔ကဲ႔သို႔ေသာအဆင္သင္႔ျပဳ လုပ္ႏိုင္ေသာ Server ေပါင္းမ်ားစြာ႐ွိ၏ ။
သို႔ေသာ္ မိမိ၏ Blog ႏွင္႔ Web Site မ်ားကို မိမိလိုခ်င္သည္႔ပံုစံရရန္အတြက္မူ Html code ကို အေျခခံမွ် နားလည္ တတ္ထားသင္႔ေပ၏။
တျခားတိုင္းႏွင္႔ျပည္နယ္မ်ားတြင္ေတာ႔မေျပာတတ္။ ထား၀ယ္ကြန္ျပဴတာတကၠသိုလ္မွာ ၂၀၀၃/၂၀၀၄
ခုႏွစ္မ်ားတြင္တက္ခဲ႔ေသာ ေက်ာင္းသားမ်ား Html ကိုေတာ႔ သင္ပါရဲ႕ အမွန္တကယ္ Run လို႔မရဘူးဆို႔လို႔..
.
ဒီ Post ကို ေရးသားတင္ဆက္ျခင္းျဖစ္ေၾကာင္းပါ။
ဤသင္ခန္းစာျဖင္႔ တစံုတစ္ေယာက္ကို အက်ိ ဳ းျဖစ္ထြန္း ေစခဲ႔လွ်င္ျဖင္႔ ေရးရက်ဳိးနပ္ေပၿပီ။
အမွန္တကယ္လိုအပ္ေနသူမ်ား Comment ေပး၍ ေတာင္းဆိုလွ်င္ တိုက္႐ုိက္ Tag ေပးပါမည္။
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
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 ေပၚမွာ ဒီလိုေလးခ်ေရးလိုက္မယ္
ၿပီးရင္ 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 icon နဲ႕ ေတြ႔ ရမယ္ ။
ကဲ ဒီ icon ကိုဖြင္႔လိုက္ ဒီလိုေတြ႕ရမယ္ ။
Comments
Post a Comment