-->
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

"HTML 5" အေျခခံ Video သင္ခန္းစာမ်ား Download

"HTML 5" အေျခခံ Video သင္ခန္းစာမ်ား Download

Posted in ,
2 comments
By Kaung Htet Htun

 
HTML 5 အတြက္ ဗီဒီယုိ သင္ခန္းစာ (အဂၤလိပ္လုိ) ေတြ ျဖစ္ပါတယ္။ 
ဖုိင္ဆုိဒ္ႀကီးလြန္းလုိ႔ ေခါင္းစဥ္အလုိက္၊ rar နဲ႔ ခ်ဳံ႕ၿပီးတင္ေပးထားပါတယ္။ 
ဒီေန႔ (၄)ဖုိင္တင္ေပးလိုက္ၿပီး၊
 ေနာက္ေန႔မွ က်န္တဲ့ ဖုိင္ေတြ ဆက္လက္တင္ေပးသြားပါမယ္။ 

01_What_Is_HTML5

02_Understanding_HTML5_Markup_and_CSS3

03_Beginning_with_Wireframing

04_Creating_a_Simple_Blog_Design_with_HTML5

05_Designing_an_HTML5_Form

06_Incorporating_Graphics

07_Adding_Multimedia 

Download Link ေတြ မရရင္ Comment ေပးၿပီး ေျပာခဲ့ပါ၊ ျပန္ျပင္ေပးပါ့မယ္။ အဆင္ေျပတယ္ဆုိရင္ ျပန္ခါနီး ေၾကာ္ျငာေလးမ်ားကုိ တစ္ခ်က္မွ် ကလစ္ေပးသြားၾကပါ။ :D

HTML Second Edition (ျမန္မာလုိ စာအုပ္)

HTML Second Edition (ျမန္မာလုိ စာအုပ္)

No comments
By Kaung Htet Htun

saturngod ( www.saturngod.net ) မွေရးသားတဲ့ HTML Second Edition စာအုပ္ျဖစ္ပါတယ္။
ေဒါင္းရန္

Download လုပ္ရန္အတြက္ 5 second ေစာင့္ပါ၊ ၿပီးရင္ SKIP AD ကုိႏွိပ္ၿပီး ေဒါင္းပါ။ Download Link ေတြ မရရင္ Comment ေပးၿပီး ေျပာခဲ့ပါ၊ ျပန္ျပင္ေပးပါ့မယ္။ အဆင္ေျပတယ္ဆုိရင္ ျပန္ခါနီး ေၾကာ္ျငာေလးမ်ားကုိ တစ္ခ်က္မွ် ကလစ္ေပးသြားၾကပါ။ :D

HTML ( Lesson 4 )

HTML ( Lesson 4 )

Posted in
No comments
By $U Y4T4N4R















အားလံုးပဲ..မဂၤလာပါ..။ ဒီေန႔ေတာ့.. Background Image ေတြထည့္တဲ့နည္းေလးေတြ. ေၿပာၾကရေအာင္ေနာ္.။
Web Page ေတြမွာ.. ေနာက္ခံပံု ထည့္တဲ့နည္းေလးပါ..။

Using Background Image
<body background="   " >

Example...,
<html>
<head>
</head>
<body background="D:\html.jpg">
</body>
</html>


- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "bgimage.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. bgimage.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။ 

- Background image ထည့္တဲ့နည္းေလးပါ..။ ထည့္ခ်င္တဲ့.. image ကုိ.. background=" " ထဲကုိ.. file
လမ္းေၾကာင္းေပးရပါမယ္..။
- ဒါကေတာ့.. D: ေအာက္ထဲမွာ.ထည့္ထားတဲ့.. ပံုေလးကုိ.. လမ္းေၾကာင္းေပးထားတာပါ..။
- တကယ္လို႔.. html.jpg ဆိုတဲ့ပံုေလးဟာ.. D: ေအာက္က.. photo ဆိုတဲ့. folder ထဲမွာ.ရွိ၇င္..
D:\photo\html.jpg လုိ႔ထည့္လိုက္ပါ..။
- .jpg ဆိုတာ.. ပံုရဲ႔.. type ပါ..။  ပံုေတြမွာ. type အမ်ိဳးမ်ိဳးရွိပါတယ္..။ .jpg, .png, .jpeg,... အမ်ားၾကီးရွိပါတယ္..။
- ပံုရဲ႔ type ကုိ.. သိခ်င္ရင္.. ပံုကုိ. right click ႏွိပ္ၿပီး.. properties ၾကည့္လိုက္ပါ.။ ထြက္လာပါလိမ့္မယ္..။

Using Text Style
Tag                               Function
<small>.. </small>        small text
<big>... </big>             big text
<sup>...</sup>             super script
<sub>...</sub>             sub script
<strike>....</strike>      draw a line through
<u>....</u>                  under line
<cite>...</cite>             italic text
<em>....</em>             italic text
<i>....</i>                    italic text
<strong>...</strong>     bold text
<b>....</b>                  bold text
<tt>...</tt>                   typewriter font(monospaced font)
<pre>.... </pre>           monospaced font, preserving spaces and line breaks
                                    ( Don't need   to use <br> )
Example....,
<html>
<head>
<title> font style </title>
</head>
<body>
<small> Small text </small><br>
<big> Big text </big><br>
H<sub>2</sub>O<br>
x<sup>2</sup>+y<sup>2</sup><br>
<strike> draw a line through </strike><br>
<u> Under Line</u>
<cite> Italic text </cite>
<em> Italic text </em>
<i> Italic text </i>
<strong> Blod text</strong>
<b> Blod text </b>
<tt> Typewriter font </tt>
<pre>
No              Name          Address
1             Aye Aye          Yangon
2            Zaw Zaw          Mandalay
3            Hla Hla             Bago
</pre>
</body>
</html>

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "fontstyle.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. fontstyle.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။ 

- ဒီလိုဆုိရင္.. အေပၚက.. tag ေတြကုိ. နားလည္မယ္လို႔..ထင္ပါတယ္..။
- တၿခားဟာေတြက.. နားလည္လြယ္မွာပါ..။
- html မွာ. space ေတြကုိ.. လွ်စ္လွ်ဴရွဳပါတယ္.။
- <pre> ကေတာ့.. user က space ရိုက္ထည့္ထား၇င္..space ကုိပါ..ေဖာ္ၿပေပးထားပါတယ္..။
- အေပၚက.. code ေတြကိုၾကည့္လုိက္ပါ..။ No, Name , Address ေတြကုိ. space ၿခားၿပီး..ေရးခဲ့ပါတယ္.။
- run လိုက္ရင္လည္း.. browser မွာလည္း.. ရိုက္ခဲ့တဲ့. space အတိုင္း... ေဖာ္ၿပေပးပါတယ္..။

Using Font Control
<font color="  " size=      face="   ">...... </font>

Example...,
<html>
<head>
</head>
<body bgcolor="blue">
<h1> Using Font Control </h1>
<font color="white" size=4 face="Arial"> Arial font </font>
<font color="red" size=3 face="Times New Roman"> Times New Roman font </font>
<font color="red" face="Times New Roman">Times New Roman font </font>
</body>
</body>
</html>

 - အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "font.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. font.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။ 

- color ေနရာမွာ. အရင္တစ္ေခါက္က..ေၿပာခဲ့သလို.. color name ေတြလည္းထည့္လို႔ရပါတယ္..။ ဒါမွမဟုတ္.. color code ေတြလည္းထည့္လုိ႔ရပါတယ္..။
- size=" " ကေတာ့. font size ပါ..။ default ကေတာ့... 3 ပါ..။ တကယ္လို႔..သင္ဟာ.. font="+1" ဆိုရင္.. font="4" နဲ႔တူတူပါပဲ.။ default ကို.. တစ္ေပါင္းထားတာပါ..။ အဲ့လိုမ်ိဳးလည္း ေရးလို႔ပါတယ္..။

Using Basefont
<basefont>.... </basefont>

Example...,
<html>
<body>
<basefont color="red" size=7 face="Arial">
<font color="green" size=5> Hello </font>
<font color="blue" size=4> Hello </font>
<font color="yellow" > Hello </font>

<font  > Hello </font> 
</basefont>
</body>
</html>


- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "basefont.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. basefont.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။
 

- basefont ဆုိတာ.. html code ထဲမွာေရးထားတဲ့.. စာသားေတြဟာ.. font တစ္မ်ိဳးထဲပဲသံုးမယ္ဆုိ၇င္.. basefont မွာ.တစ္ခါပဲ.. ေၾကညာလိုက္တာနဲ႔ရပါတယ္..။
- အေပၚက.. code ထဲမွာ..<basefont color="red" size=7 face="Arial">  လို႔ေရးထားလို႔.. ေအာက္မွာရွိတဲ့.. <font> </font> အားလံုးအတြက္.. အက်ံဳး၀င္ပါတယ္.။ 
- အားလံုးကို.. Arial font နဲ႔ေဖာ္ၿပမွာပါ..။ color="red" လို႔ထည့္ထားလို႔.. ဘာမွမေၿပာခဲ့ရင္လည္း.. အနီေရာင္နဲ႔ပဲေဖာ္ၿပမွာပါ..။
- font size လည္း..ဒီတိုင္းပါပဲ..။
- <font  > Hello </font> က. browser မွာ... ေပၚလာတဲ့ပံုကုိ.ၾကည့္ၿပီး..သိႏိုင္ပါတယ္..။
- သံုးရမယ့္.. font အားလံုးတူေနရင္.. <basefont> ထဲထည့္ၿပီးသံုးႏိုင္ပါတယ္... ^_^

ဒီေန႔ေတာ့.. ေနာက္ခံ background image ထည့္နညး္နဲ႔.. font ေတြအေၾကာင္းေၿပာၿပခဲ့ပါတယ္.။ နားလည္ၾကမယ္လို႔လည္း.. ယံုၾကည္ပါတယ္..။ တကယ္လုိ႔.. နားမလည္တာမ်ားရွိခဲ့ရင္လညး္.. 
comment box မွာ... စာခ်န္ခဲ့လုိ႔ရပါတယ္..။ တေလးတစား.. ေလ့လာေပးတဲ့အတြက္. ေက်းဇူးတင္ပါတယ္...   ^_^

$U Y4T4N4R ~ www.technologicalvilla.blogspot.com

HTML ( Lesson 3 )

HTML ( Lesson 3 )

Posted in
No comments
By $U Y4T4N4R



အားလံုးပဲ..မဂၤလာပါ..။ မေတြ႔ရတာလည္းၾကာၿပီေနာ္..။ ညီမလည္း. android project တစ္ခုကုိ.. အၿမန္ေရးေနတာနဲ႔.. post ေတြမတင္ၿဖစ္လိုက္တာပါ..။ HTML ေတြလည္း.. မေမ့လိုက္ၾကနဲ႔ဦးေနာ္.. ^_^

Using Horizontal Rule <hr>
<html>
<head>
</head>
<body>
<h1 align="center"> Hello World </h1>
<hr>
</body>
</html>

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "hrline.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. hrline.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။

- Horizontal line တားခ်င္ရင္.. <hr> ကုိသံုးလို႔႔ပါတယ္.။ 
- line ကိုလည္း.. အထူအပါး.. ၾကိဳက္သလိုထားလို႔ရပါတယ္...။ ေအာက္က.. attribute ကုိၾကည့္ၾကည့္ပါ။



Attribute of Horizontal Rule
<hr size=" "  align="  " width="  " noshade="noshade">

 Example
 <html>
<head>
</head>
<body>
<hr size=4 align="center" width=300 shade="noshade">
</body>
</html>


- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "hr.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. hr.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။

- <hr> မွာ size က.. horizontal လိုင္းရဲ႔..အထူပါ..။
- align="center" လို႔ေပးခဲ့လို႔.. အလယ္မွာေပၚေနပါမယ္.။
- width ကေတာ့.. line ရဲ႔ အရွည္ပါ..။ 
- shade="noshade" ဆိုတဲ့အတြက္.. line က.. ပထမတစ္ပုဒ္ကလိုင္းနဲ႔မတူပဲ.. shade မပါပဲ..ၿဖစ္ေနပါ့မယ္.။
- ဂဏန္းတန္ဖိုးေတြကုိ.. " " (double code) ထည့္မေရးလည္းရပါတယ္..။

Break line  <br>
<html>
<head>
</head>
<body>
Hello <br>
Hi <br>
Welcome <br>
</body>
</html>

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "br.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. br.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။

- <br> ဆိုတာ...စာေတြကုိ..ေနာက္တစ္ေၾကာင္းဆင္းခ်င္ရင္.. <br> tag ကုိသံုးပါတယ္..။

 Using Blockquote
 <html>
<head>
</head>
<body>
<p> <blockquote> HTML is specialized language, designed to display and access web pages. The language consists of ordinary text and special commands called tags which are really HTML language commands.
</p></blockquote>
</body>
</html>

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "blockquote.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. blockquote.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။

- blockquote ေတြကုိ.. paragraph အမ်ားစု <p> နဲ႔တြဲၿပီးသံုးပါတယ္...။ 
- paragraph ေတြကုိ.. သပ္သပ္ရပ္ရပ္ေပၚေပးႏိုင္ဖုိ႔ပါ..။

Using Background Color
<html>
<head>
</head>
<body bgcolor="red">
 My background is change.
</body>
</html>

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "bgcolor.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. bgcolor.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။
 

- background color ကုိေၿပာင္းခ်င္ရင္.. bgcolor ကုိ.သံုးရပါတယ္.။
- bgcolor ကုိ.. body tag အတြင္းမွာသာ.. အသံုးၿပဳႏိုင္ပါတယ္.။
- color တန္ဖိုးေပးတဲ့ေနရာမွာ.. "red", "green" , "blue" ဆိုၿပီး. နာမည္သာမက.. ဂဏန္းတန္ဖုိးေတြပါ..ေပးလို႔ရပါတယ္.။
- eg... color="#ff0000" , color="red"
- ကိန္းဂဏန္းနဲ႔ေပးမယ္ဆုိရင္.. ေရွ႔ကေန  # ကုိ.ထည့္ေပးရပါတယ္.။  
- color code ေတြကုိ.. အလြတ္မရရင္.. Photoshop software မွာၾကည့္လုိ႔ရပါတယ္.။

Using Text Color 
<html>
<head>
</head>
<body text="yellow" bgcolor="black">
 Changing background and using text color.<br>
Text color is yellow.<br>
</body>
</html> 

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "txtcolor.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. txtcolor.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။
 
 

- text color ကုိ. body ထဲမွာ. text=" " ဆိုၿပီးသံုးရပါတယ္..။
- <body> ထဲမွာေရးထားတ့ဲအတြက္.. <body> ... </body> အတြင္းက..စာအားလံုးနဲ႔သက္ဆုိင္ပါတယ္..။ စာအားလံုး. အ၀ါေ၇ာင္ၿဖစ္သြားပါလိမ့္မယ္..။

ဒီေန႔ေတာ့.. horizontal line, break line နဲ႔.. color ေၿပာင္းတာေတြ.ေၿပာခဲ့တယ္ေနာ္..။ အားလံုးပဲ.. လုပ္လို႔အဆင္ေၿပလိမ့္မယ္လုိ႔...ထင္ပါတယ္..။ ဘယ္လိုမ်ိဳးေပၚလာလဲဆိုတာကိုေတာ့.. ကိုယ့္ဘာသာကုိယ္.စမ္းၾကည့္လိုက္ၾကေနာ္...။ ေနာက္ေန႔ဆက္ေရးမယ့္.. သင္ခန္းစာေတြကုိလည္း. အားေပးၾကပါဦးေနာ္.... ^_^

HTML ( Lesson 2 )

HTML ( Lesson 2 )

Posted in
No comments
By $U Y4T4N4R











Using Heading Tag 
<h1>    ~    First level heading ( Largest )
<h2>    ~    Second level heading
<h3>    ~    Third level heading ( Default Size ) (Middle)
<h4>    ~    Fourth level heading
<h5>    ~    Fixth level heading
<h6>    ~    Sixth level heading ( Smallest )

Heading tag ဆိုတာ. website မွာ..ေခါင္းစဥ္တပ္တဲ့.. tag ေလးပါ.. ။ သူက.. auto 2 line ဆင္းပါတယ္.။ auto 2 line ဆင္းတယ္ဆိုတာ.ဘာေၿပာတာလဲဆိုရင္.. HTML မွာ..စာေၾကာင္းေတြကုိ.. ဆက္တိုက္မဟုတ္ပဲ.. တစ္လိုင္းခ်င္းစီၿပခ်င္ရင္.. <br> ဆိုတဲ့ tag ေလးကုိသံုးပါတယ္.။ header tag ေတြက.. ေနာက္တစ္ေၾကာင္းဆင္းခ်င္္ရင္.. <br> ကုိ.သံုးစရာမလိုပါဘူး..။ သူ႔ဘာသာသူ..အလုိအေလွ်ာက္..ေနာက္တစ္ line ဆင္းသြားပါတယ္..။ အလိုအေလွ်ာက္. Bold ၿဖစ္ပါတယ္.။

Example ေလး..တစ္ပုဒ္ေလာက္..လုပ္ၾကည့္ၾကရေအာင္ေနာ္..

<html>
<head>
<title> Using heading tag </title>
</head>
<body>
<h1> First Level</h1>
<h2> Second Level </h2>
<h3> Third Level </h3>
<h4> Fourth Level </h4>
<h5> Fixth Level </h5>
<h6> Sixth Level </h6>
Default size is same as header 3.
</body>
</html>


- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "header.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. header.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။
- Header ေတြက.. size ေတြ..မတူညီတာကုိ..ေတြ႔ရပါလိမ့္မယ္..။
- Default size is same as header 3. ဆိုတဲ့စာဟာ.. <h3>Third Level </h3> ကေရးထားတဲ့စာနဲ႔.. font size ခ်င္းတူေနတာကို..ေတြ႔ရပါလိမ့္မယ္..။

Using Heading Tag and Alignment

<element attribute = " value ">  ဆိုတဲ့ပံုစံနဲ႔ေရးပါတယ္..။ element , attribute , alignment ေတြေန၇ာမွာ.. ဘာေတြထည့္ရတာလဲဆုိရင္..

eg.  <h1  align  = "center" >

Values are:
left (default)
right
center

Example ..,

<html>
<head>
<title> Using Heading Tag and Alignment </title>
</head>
<body>
<h1 align = "center" > First </h1>
<h2 align  = "left" > Second </h2>
<h3 align = "right" > Third </h3>
<h2> Default </h2>
</body>
</html>

- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "headerandattribute.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. headerandattribute.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။
- attribute ေတြထည့္ေရးတာကေတာ့.. စာေတြကုိ..ဘယ္ေနရာမွာထားမယ္..ဘယ္လိုမ်ိဳးထားမယ္ဆုိၿပီး.. values ေတြထည့္ေရးတာပါ.။ align="left" လို႔မေပးလဲ.. Default ဆိုတဲ့စာက.. ဘယ္ဘက္မွာေပၚေနပါလိမ့္မယ္..။
- ဘာလို႔လဲဆိုရင္..စာေတြက.. ဘယ္ဘက္ကေန.. စေရးရတာကုိး.. ^_^

Paragraph Tag and Alignment
<p aling = "......." > .......... </p> ဆိုတဲ့.ပံုစံနဲ႔..ေရးပါတယ္.။ webpage က စာပုိဒ္ေတြဆိုရင္.. <p> နဲ႔ေရးရပါတယ္..။

Example...,

<html>
<head>
<title> Paragraph Tag and Alignment </title>
</head>
<body>
<p align = "center" > HTML is Hyper Text Makeup Language. It is specialized language, designed to display and access web pages. </p>
</body>
</html>


- အေပၚက.. code ေတြကုိ.. NotePad++ ထဲ.. ခ်ေရးလိုက္ပါ..။
- ၿပီးရင္.. "paragraph.html" ဆိုၿပီး save လုပ္လိုက္ပါမယ္.။
- Save လုပ္ထားတဲ့. paragraph.html ကုိ..computer ထဲမွာၿပန္သြားရွာၿပီး.. ဖြင့္ၾကည့္လိုက္ပါ.။
- စာပုိဒ္ေလးဟာ. သပ္သပ္ရပ္ရပ္နဲ႔.. ရွိေနပါတယ္.။ align="center" လို႔ေပးထားလို႔.. အလယ္မွာ..ေပၚေနပါတယ္.။
- align ထဲမွာ.. ၾကိဳက္တဲ့.. values ( left, right, center ) ထည့္ႏိုင္ပါတယ္..။

ဒီေန႔ေတာ့.. Paragraph Tag နဲ႔ပဲ..နားလိုက္ၾကရေအာင္ေနာ္..။ အရင္ေန႔က..သင္ခဲ့တဲ့.. သင္ခန္းစာကုိလည္း.. မေမ့ပစ္ပါနဲ႔ေနာ္.. :(
ေနာက္ေန႔ေတြမွာလည္း.. ဆက္သင္ေပးမွာမုိ႔လို႔.. အားလံုးပဲ.. ၾကိဳးစားၾကပါလို႔... ေၿပာၾကားရင္း.. ေက်းဇူးအထူးတင္ရွိပါတယ္..။

$U Y4T4N4R ~ www.technologicalvilla.blogspot.com

HTML ( Lesson 1 )

HTML ( Lesson 1 )

Posted in
No comments
By $U Y4T4N4R















 အားလံုးပဲ.မဂၤလာပါ..။ ညီမ..ဒီေန႔ကေနစၿပီးေတာ့. HTML Language ကုိ..သင္ၾကာေပးသြားမွာပါ..။ HTML ဆိုတာ. Hyper Text Markup Language ၿဖစ္ပါတယ္..။ webအပိုင္းကုိ. ေလ့လာေတာ့မယ္ဆိုရင္.. HTML ကေန..ေလ့လာတာ..အေကာင္းဆံုးပါ..။ HTML က.လြယ္ကူပါတယ္.။ မခက္ပါဘူး..။ HTML ရသြားရင္... တၿခားကိုယ္ေလ့လာခ်င္တဲ့.. programming ကို.. စိတ္ခ်လက္ခ်ေလ့လာႏုိင္ပါတယ္.။ တၿခားေသာ.. programming language ေတြမွာလည္း. HTML က.မပါမၿဖစ္..ၿပန္ပါလုိ႔ပါ. ^_^

အရင္ဦးဆံုး. HTML ကုိ.ဘာ software နဲ႔ေရးမလဲေပါ့.. ။ HTML ကုိ.. notepad နဲ႔ေရးပါတယ္..။ ခက္ခက္ခဲခဲရွာေနစရာမလိုပါဘူး..ကြန္ပ်ဴတာတိုင္းမွာ. notepad ပါပါတယ္.. ^_^
WindowsKey+R ကုိႏွိပ္ၿပီး. run box ေခၚလိုက္ပါ..။ notepad လုိ႔ထည့္ရိုက္ၿပီး.. enter ေခါက္လိုက္ပါ.. က်လာပါလိမ့္မယ္..။ ဒါေပမယ့္... အစပိုင္းမွာေတာ့. notepad နဲ႔ေရးတာ.အဆင္ေၿပပါတယ္..။ ေနာက္ပိုင္း code ေတြမ်ားလာတဲ့အခါမွာ.. notepad နဲ႔ေရးရင္.. error ဘယ္နားတတ္လို႔တတ္မွန္းမသိနဲ႔.. စစ္ရတာ.ခက္ပါတယ္.။ ဒါေၾကာင့္မုိ႔.. ၿဖစ္ႏိုင္မယ္ဆိုရင္.. ေအာက္မွာၿပထားတဲ့. NotePad++ ကုိ..Download ခ်ၿပီး.. Run ၾကည့္လိုက္ပါေနာ္.. ^_^


Download NotePad++

Structure of HTML

<html>
<head>
<title> ......... </title>
</head>
<body>
............
............
</body>
</html>

- html က.. < > (tag) အဖြင့္အပိတ္ထဲမွာ..ေရးပါတယ္.။ <html> စရင္.. </html> နဲ႔ဆံုးပါတယ္..။
- / ေလးကုိ.. slash လို႔ ေခၚပါတယ္..။
- head ဆုိရင္လည္း.. <head> နဲ႔စၿပီး.. </head> နဲ႔ဆံုးပါတယ္..။
- <head> ထဲမွာ. <title> </title> ရွိပါတယ္..။ title ႏွစ္ခုၾကားမွာ.. browser ရဲ႔ ထိပ္မွာေပၚခ်င္တဲ့စာကုိ..ေပးလို႔ရပါတယ္..။ ခဏေန.. ဥပမာၿပ၇င္..နားလည္းသြားမွာပါ.. :)
- <body> </body> ၾကားထဲမွာ.. browser ေပၚမွာ...web page မွာ...ၿပခ်င္တဲ့.စာသားေတြကို..ထည့္ေရးေပးရမွာပါ..။

ဥပမာေလး..ၾကည့္လိုက္ၾကရေအာင္ေနာ္...

<html>
<head>
<title> example of html </title>
</head>
<body>
Hello World!
</body>
</html>

- အေပၚက.. code ေတြကုိ.. Notepad++ ထဲမွာ. ထည့္ရိုက္လိုက္ပါ.။ copy မကူးပါနဲ႔..။ ဘယ္လိုပဲ.လုပ္လုပ္.. အေၿဖကထြက္လာမွာပါ..။ ဒါေပမယ့္. ကိုယ္တိုင္ေရးေတာ့.. ပိုၿပီး.. မွတ္မိလြယ္ပါတယ္..။
- ေရးၿပီးသြားရင္.." egofHTML.html " ဆိုၿပီး.. save လုပ္လိုက္ပါ..။ html code ေတြကုိ.. save လုပ္ရင္.. ေနာက္ကေန.. .html ဆိုၿပီး..ထည့္ေပးရပါတယ္..။
- save လုပ္ၿပီးသား.. file ကုိ. double click လုပ္ၿပီးဖြင့္ၾကည့္လိုက္ပါ.။
- browser ရဲ႔ထိပ္ဆံုးမွာ. ၾကည့္လိုက္ပါ..။ title 2 ခုၾကားက. example of html ဆိုတာေလး..ေပၚေနပါလိမ့္မယ္...။
- web page မွာေတာ့.. body ထဲက. Hello World! ဆိုတာေလး.. ေပၚေနပါတယ္..။

ဒါဆုိရင္ေတာ့.. html ကုိ.ဘယ္လိုေရးမယ္..။ ဘယ္လုိ run မယ္ဆိုတာကုိ.. သေဘာေပါက္မယ္လို႔. ယုံၾကည္ပါတယ္..။ ေနာက္ရက္ေတြမွာ.. စာလံုး style နဲ႔.. ပံုထည့္တာေတြ.. link ခ်ိတ္တာေတြကုိ.. ရွင္းၿပသြားမွာပါ...။ ဆက္လက္ေရးသားသြားမယ့္.. HTMLသင္ခန္းစာ.. အားလံုးကုိ.. ေသေသခ်ာခ်ာလုပ္ၾကည့္သြားမယ္ဆိုရင္.. HTML ကုိ.. အၿပင္သင္တန္းေတြ.. တတ္စရာမလိုပဲ..ကၽြမ္းက်င္သြားလိမ့္မယ္လို႔..ယံုၾကည္ပါတယ္..။
အားလံုးကုိ..ေက်းဇူးအထူးတင္ရွိပါတယ္.. ^_^

$U Y4T4N4R ~ www.technologicalvilla.blogspot.com

ေဒါင္းနည္းမသိပါကအရင္ဖတ္ပါ

Download Link ကုိႏွိပ္ၿပီးလွ်င္ 5စကၠန္႔ေစာင့္ပါ၊ ၿပီးလွ်င္ ညာဘက္အေပၚေဒါင့္မွ Skip ကုိႏွိပ္ေပးမွသာ Download Page သုိ႔ ေရာက္႐ွိမည္ျဖစ္သည္။

Proudly Powered by Blogger.