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

03 June 2013

HTML(Lesson 2)


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-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>
တို႔ၾကားထဲမွာဘာပဲေရးေရး အဲ့ဒီ့ ျမားအနက္ရွိတဲ့ အျဖဴေရာင္မ်က္ႏွာျပင္မွာေပၚမွာပါ၊ ဒီသင္ခန္းစာကိုေသခ်ာနားလည္ေအာင္ ေလ့လာပါ