Friday, December 25, 2020

CSS Comments ကို ဘယ်နေရာမှာ အသုံးပြုလဲ ?

CSS Comments ကို code တွေရေးတဲ့အခါ ရှင်းလင်းစွာ သိရဖို့ ၊ ပြင်တဲ့အခါ လွယ်ကူဖို့ ဘယ် CSS ကို အသုံးပြုထားလဲဆိုတာ သိရဖို့ အတွက် အသုံးပြုပါတယ်။

CSS Comments ကို ဘယ်လိုအသုံးပြုလဲ ?

CSS Comment ကို style အဖွင့် နဲ့ style အပိတ် ကြားမှာ ရေးရပါမယ်။

CSS Comments

```
<!Doctype HTML>
```
```
<html>
```
```
    <head>
```
```
        <style>
```
```
             body {
```

                 backgound-color: orange; /*this is body background color*/

```
             }
```
```
             h1 {
```

                 color: black; /*this is heading one font color*/

                 text-align: center; /*this is heading text center*/

```
             }
```
```
             p {
```

                 font-size: 16px; /*this is p text is font size*/

```
                 font-weight: bold;
```
```
             }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <h1>This is Heading 1</h1>
```
```
        <p>This is Paragraph</p>
```
```
    </body>
```
```
</html>
```

CSS Selectors ကို အသုံးပြုဖို့ နည်း ၅ နည်းရှိပါတယ်။

Simple Selectors (သတ်မှတ်ထားသော element name တွေကို base ယူပြီး အသုံးပြုခြင်းဖြစ်ပါတယ်။)
Combinator selectors (အထူးပြုသတ်မှတ်ထားသော element ၂ ခုကို ပေါင်းပြီး အသုံးပြုခြင်း ဖြစ်ပါတယ်။)
Pseudo-class selectors (သတ်မှတ်ထားသော element name links တွေရဲ့ state မူတည်ပြီး အသုံးပြုခြင်း ဖြစ်ပါတယ်။)
Pseudo-elements selectors (သတ်မှတ်ထားသော style တစ်ခုချင်းစီ၏ အစိတ်အပိုင်းများကို element အနေနဲ့ အသုံးပြုခြင်း ဖြစ်ပါတယ်။)
Attribute selectors (သတ်မှတ်ထားသော element တစ်ခုချင်းစီ၏ attribute or attribute value တွေကို အသုံးပြုခြင်း ဖြစ်ပါတယ်။)

၁) Simple Selectors

Simple Selectors မှာ ID Selector, Class Selector ဆိုပြီး ရှိပါတယ်။

ID Selector ကတာ့ > # ကို ကိုယ်စားပြုပါတယ်။ Class Selector ကတော့ > . ကို ကိုယ်စားပြုပါတယ်။

ဥပမာ > #wrapper , container

၂) Combinator selectors

အထူးပြုသတ်မှတ်ထားသော element ၂ ခုကို ပေါင်းပြီး အသုံးပြုခြင်း ဖြစ်ပါတယ်။

ဥပမာ- div p{background-color: orange;}

၃) Pseudo-class selectors

Pseudo-class selectors မှာ active state, hover state တွေကို links အနေနဲ့ အဓိကထားပြီး အသုံးပြုခြင်းဖြစ်ပါတယ်။

ဥပမာ- a:link,a:hover, a:active, a:focus, div:hover{color: white;background-color: green;}

၄) Pseudo-elements selectors

Pseudo-elements selectors မှာ selector ကို class name တစ်ခုနဲ့ သုံးပြီး Pseudo-elements selectors နဲ့ တွဲသုံးခြင်းဖြစ်ပါတယ်။

ဥပမာ - p.center::before{background-color: blue;} > p က selector , .center က class, ::before က Pseudo-elements selectors ဖြစ်ပါတယ်။

၅) Attribute selectors

Attribute selectors မှာ element တစ်ခုချင်းအတွက် သူတို့နဲ့ သက်ဆိုင်တဲ့ attribute ကို အထူးပြုအနေနဲ့ သုံးခြင်းဖြစ်ပါတယ်။

ဥပမာ - a[target]{background-color: yellow;}

Tuesday, December 22, 2020

Three Ways to Insert CSS

ကျွန်တော်တို့မှာ CSS ကိုရေးသားဖို့ နည်းသုံးနည်းရှိပါတယ်။အဲ့နည်းသုံးနည်းကတော့

External CSS
Internal CSS
Inline CSS

External CSS

External CSS ကတော့ အလွယ်ကူဆုံးပြောရရင် File သပ်သပ်ခွဲပြီး ရေးလိုက်တာပါ။ခွဲရေးလိုက်တဲ့ CSS File ကို head section ထဲမှာ link ဆိုတဲ့ element ကိုသုံးပြီး ချိတ်ပေးရပါမယ်။ခွဲရေးလိုက်တဲ့ File ရဲ့ extension ဟာ css ဖြစ်တဲ့အတွက် .cssနဲ့အဆုံးသတ်ရပါမယ်။နောက်ပြီး Internal Style လို style ဆိုတဲ့ tag ထည့်စရာမလို့တော့ပါဖူး။

Example

```
<!DOCTYPE HTML>
```
```
<html>
```
```
<head>
```

<link rel="stylesheet" href="style.css">

```
</head>
```
```
<body>
```
```
<h1>Hello World</h1>
```
```
<p>This is a paragraph.</p>
```
```
</body>
```
```
</html>
```

Try it Yourself !

style.css

```
body   {
```
```
           background-color : black;
```
```
}
```
```
h1   {
```
```
           color : red;
```
```
}
```
```
p   {
```
```
           color : green;
```
```
}
```

Internal CSS

Internal CSS ဆိုတာကတော့ HTML Document ရဲ့ Head Section ထဲမှာပဲ <style> ကိုသုံးပြီး ရေးတာကိုပြောတာပါ။

Example

```
<!DOCTYPE HTML>
```
```
<html>
```
```
<head>
```
```
<style>
```
```
body   {
```
```
           background-color : grey;
```
```
}
```
```
h1   {
```
```
           color : green;
```
```
}
```
```
</style>
```
```
</head>
```
```
<body>
```
```
<h1>Hello World</h1>
```
```
<p>This is a paragraph.</p>
```
```
</body>
```
```
</html>
```

Try it Yourself !

Inline CSS

Inline Style ကတော့ HTML Element မှာ style ဆိုတဲ့ attribute ကိုရေးပြီး အဲ့ထဲမှာ css code တွေကို ရေးရတာဖြစ်ပါတယ်။

Example

```
<!DOCTYPE HTML>
```
```
<html>
```
```
<head>
```
```
</head>
```
```
<body>
```
```
<h1 style="color:red;">Hello World</h1>
```

<p style="color:green;">This is a paragraph.</p>

```
</body>
```
```
</html>
```

Try it Yourself !

Multiple Style Sheets

အကယ်၍ ကျွန်တော်တို့က style သုံးခုလုံးပေးထားတယ်ဆိုရင် အဓိကဖော်ပြပေးမှာကတော့ Inline Style ဖြစ်ပါတယ်။

Internal Style ရဲ့အောက်မှာ External Style ကိုသုံးထားမယ်ဆိုရင်တော့ External Style ထဲကဟာကို အတည်ယူပြီးဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

External Style ရဲ့အောက်မှာ Internal Style ကိုသုံးထားမယ်ဆိုရင်တော့ Internal Style ထဲကဟာကို အတည်ယူပြီးဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

အပေါ်မှာ ပြောထားတဲ့ဟာတွေက Inline Style ရေးမထားတဲ့အချိန်မှာ အလုပ်လုပ်ပေးမယ့်ပုံကို ပြောထားတာပါ။ Inline Style သာသတ်မှတ်ပေးထားရင် Inline Style ထဲကဟာကိုပဲ အတည်ယူပြီးတော့ ဖော်ပြပေးမှာပါ။

Monday, December 21, 2020

Laravel_Application_Structure

Writen By Zaw Zaw Win

Tags Laravel Intro

Application Structure in laravel

Project ကို laravel Framework သုံးး ပြီးး ရေးး ရတွင် ပါဝင်မည့် folder,sub folder,files တွေ့ ကို‌အောက်ပါ screen shot တွင် ဖော်ပြထား ပါ သည်။

Application structure တွင် ‌သိထား ဖို့ လိုတယ် folder ကို (*) and red colour ဖြစ် ဖော်ပြထား ပါသည်။။

Laravel's app directory

App directory က project တွင် အ ရမ်းး အ ရေ ပါ သော directory တစ်ခု ဖြစ်ပါ တယ် ။ Project တစ်ခု classes အားးလုံးး နီးး ပါ သည် directory လဲ ဖြစ်သည်။App directory တွင်ပါဝင်သည် folder တွေ့ကိုအောက်ပါ screen shot တွင့် ပြ ထားး ပါ တယ်

Console ဆို တယ် folder က artisan comment line interface ကို သုံးး လို့ ရ အောင် kernel.phpတွင် built in ရေးး ထားး ပါ သည်။
Exceptions directory က ကိုယ် ရဲ့ project တွင်ပါဝင်မည် errorsဖြစ် သော 404,500စသော errors pages တွေ့ ကို Handler.php file တွင် ကိုယ် ကို Custom ရေးးလို ရ ပါ တယ်။။ကိုယ် က custom မ ရေး ပဲ ထားးမယ် ဆိုရင် laravel default ဖြစ် errors handlers pages တွေ့ ကို ပြ နေမှာ ပါ။
Http directory က ကိုယ့် ရဲ့ Project တွင်ပါဝင်မည့် Controller (form နဲ့ ပတ်သတ်သော data(insert,update,delete) စ‌သည့်တို့ကို handle လုပ်သောအခါ), Middleware(Admin and user page ကို access လုပ် လို့ မရ‌အောင် လုပ်သော) ,kernel.php က middleware ကို သုံး တယ် role တွေ့ ခွဲ ရတွင် သုံးသည်။
Models folder က တော့ Eloquent ORM(Object- Relational-mapper) ကို သုံးး ထားး ပါ တယ်။၎င်းသည် database tables တွေ့ relationship(one-to-one,one-to-many,etc..) လုပ်ရတွင် ရ တွင် အသုံး ပြု ထားးသည်။Database table တစ်ခု တွင် "Model" တစ်ခု တည်ဆောက်ထား ဖို့ လိုအပ်ပါသည်။

Bootstrap directory

Bootstrap directory က တော့ bootstrap အတွက်လိုအပ်သော script ကို app.php မှာ ကြို ရေးး ထားး တာပါ။Bootstrap directory မှာ cache (sub-folder) က တော့ web application အသုံး ပြု သော caching အတွက် ပါဝင်ပါ တယ်။

Config directory

Config directory က တော့ အောက်ပါscreen shot ပေး ထား တယ်features တစ်ခုခုသုံး တယ် အခါ configuration လုပ်ပေးး တာ ပါ ။

*Database directory

Database directory ‌ကတော့ database နဲ့ဆိုင်သော files တွေ့ ကိုသိမ်းး ထားး ပါသည်။၊၎င်းတွင် sub-folders အ ဖြစ် factories (data တွေ့ကိုသိမ်းထားသော), migration (database နဲ့ဆိုင်သော table တွေ့ ကိုသိမ်း ထား တာ သော), seeds (units testing လုပ် တယ်အချိန် classes ) စသည့်တိုပါဝင်ပါသည်။

Public directory

Public directory က တော့ web application တွင် လုပ် အပ် သော external libraries or JS,CSS တွေ့ကို သိမ်းး ဖို့ နေရာ ဖြစ်ပါတယ်။

Resource directory

Resources directory တွေ့ က တော့ web application မှာ ပြမယ် page ကို views (sub-folder of resources)ဆိုတယ် နေရာ မှာ သွားး ရေးးတာပါ။

*Routes directory

Routes ဆိုတာ directory က တော့ web.php or api.phpအတွက်ဆိုပြီး file ကိုတွေ့ ရလိမ်မယ်။web.php ထည့်တွင် website မှာ ဘယ် resources directory တွင် ရှိ views ထည့်က page ကို ဘယ် path လမ်း ‌ကြောင့် မှာ ပြ မယ် ဆိုတာ ကို path name ရေးး ပေးး ဖို့ လိုပါ တယ်။။api.phpဆိုတာ API ရေ းး တယ် အချိန် အသုံး ပြု တာပါ။

Storage directory

Storage directory ကတော့ website တွင် သိမ် း မည့်data (images, videos,etc) တို့ကို သိမ်း ဖို့ အတွက် နေရာ ဖြစ်ပါတယ်။

.env ဆိုတယ် file က တော့ environment variables တွေ ကို set လုပ်ဖို့ အတွက် အသုံး ပြု တာပါ။
composer.json က တော laravel က composer dependency အတွက်ပါဝင်ပါတယ်။
package.json ကတော့ external package တွေ့ ကို installed လုပ် ထား လဲ ဆိုတာ သွား ကြည့် လိုရ တယ်နေရာ ပါ။

ကျန် တယ် files or folders တွေ့ ကို နောက် articles မှာ အ သေး စိတ် ဖော်ပြ သွားး ပါ မည်။

CSS Syntax

Writen By PhoneMyat Pyae Sone

CSS Syntax

CSS မှာ Selector နဲ့ Declaration ဆိုပြီးနှစ်ခုရှိတယ်။
Selector ကတော့ ကိုယ်ချိန်းချင်တဲ့ html element ကိုသတ်မှတ်ပေးရတယ်။
Declaration ထဲမှာကျ property နဲ့ value နှစ်ခုကို သတ်မှတ်ပေးရမယ်။

Example

h2 နဲ့ရေးထားသမျှဟာ အနီရောင်အဖြစ်ပြောင်းသွားပီး အလယ်မှာ ရောက်နေမှာဖြစ်ပါတယ်။

```
h2   {
```
```
           color : red;
```
```
           text-align : center;
```
```
}
```

Try it Yourself !

Example Explained

h2 ကတော့ Selector ဖြစ်ပါတယ်။
color ကတော့ property ဖြစ်ပြီးတော့ red ကတော့ အဲ့ property ရဲ့ value ဖြစ်ပါတယ်။
text-align ကတော့ property ဖြစ်ပြီးတော့ center ကတော့ အဲ့ property ရဲ့ value ဖြစ်ပါတယ်။

နောက်သင်ခန်းစာတွေမှာ CSS အကြောင်းကို ပိုမိုပြည့်စွာနဲ့ ဖော်ပြထားပါတယ်။

Sunday, December 20, 2020

HTML JavaScript

Writen By Zayar Aung

JavaScript ကတော့ Wepage တွေကို Interactive ဖြစ်လာဖို့အတွက် အသုံးပြုကြတာဖြစ်ပါတယ်။

Interactive ဆိုတာကတော့ တုန့်ပြန်မှုပေါ့နော၊ ခလုပ်လေး တစ်ခုနှိပ်လိုက်ရင် တစ်ခုခုပြပေးတာမျိုး၊ တစ်ခုခု ဖျောက်ပေးတာမျိုး၊ User ရဲ့ လုပ်ဆောင်ချက် တစ်ခုခုကြောင့် ပြောင်းလဲသွားတဲ့ပုံစံတွေကို ဆိုလိုတာပါ။

JavaScript Example

My First JavaScritp

Try if Yourself!

HTML <script> Tag

HTML <script> Tag ဟာ client-side script တွေရေးဖို့အတွက် အသုံးပြုပါတယ်။ JavaScript တို့ အတွက်ပေါ့ဗျာ။

<script> Tag ထဲမှာ Script Code တွေ တိုက်ရိုက်ရေးထည့်လို့ရသလို src attribute နဲ့လည်း ပြင်ပ Script ဖိုင်တွေနဲ့ ချိတ်ဆက်ပေးလို့ရပါတယ်။

JavaScript ကို အဓိကသုံးရတာကတော့ Image Minipulation တွေ၊ Form Validation တွေ နှင့် Content အပြောင်းအလှဲတွေ လုပ်ဖို့အတွက် အဓိက အသုံးပြုပါတယ်။

getEelementById() method ကတော့ JavaScript မှာ မကြာခဏတွေ့ရမယ့် html element ကို ဖမ်းတဲ့ (သတ်မှတ်တဲ့) code တစ်ခုပါ။

အောက်က ဥပမာမှာ id="demo" ရှိတဲ့ html element တစ်ခုအတွင်းကို "Hello JavaScript" ဆိုတဲ့ Content ကို JavaScript နဲ့ရေးပြထားပေးပါတယ်။

Try it Yourself! ကို နှိပ် ပြီးကြည့်လိုက်ပါ။ ဥပမာတစ်ခုက စကားလုံးတစ်‌ထောင်ထက်ပို အကျိုးရှိပါတယ်တဲ့။

Example Code

```
<script>
```

     document.getElementById("demo").innerHTML = "Hello JavaScript";

```
</script>
```

Try it Yourself!

ဒီသင်ခန်းစာကတော့ JavaScript နဲ့ မိတ်ဆွေတို့ ရင်းနှီးရုံလောက်ပါဘဲ။

JavaScript အကြောင်း အပြည့်အစုံကိုတော့ ကျွန်တော်တို့ JavaSctipt Tutorial မှာ လေ့လာနိုင်ပါတယ်။

JavaSctipt နဲ့ဘာတွေလုပ်နိုင်သလဲ?

ကျွန်တော်တို့ အောက်မှာ JavaScript နဲ့ ဘာတွေလုပ်နိုင်သလဲဆိုတာကို ဥပမာလေးတွေ ပေးထားပါတယ်။ JavaScript ရဲ့ အရသာလေးကို ခံစားကြည့်ပါ။

Code တွေကို လိုက်ဖတ်တာထက် User အနေနဲ့သုံးစွဲကြည့်ပြီး ဘာတွေလုပ်နိုင်တယ်ဆိုတာကို လေ့လာကြည့်ပါ။ Code တွေကို နားမလည်သေးလို့ စိတ်မပူပါနဲ့...

JavaScript က html element ထဲက Content တွေကို ပြောင်းလဲ ပစ်နိုင်ပါတယ်။

My First JavaScript

JavaScript can change the content of an HTML element:

This is a demonstration.

Try it Yourself!

JavaScript နဲ့ Element Style တွေကို ပြောင်းလဲပစ်နိုင်ပါတယ်။

My First JavaScript

JavaScript can change the style of an HTML element.

Try it Yourself!

JavaScript နဲ့ Attribute Value တွေကို ပြောင်းလဲ ပစ်လို့ရပါတယ်။

Try it Yourself!

HTML <noscript> Tag

<noscript> Tag ကတော့ User က JavaScript ကို Desible လုပ်ထားတဲ့အခါမျိုး၊ Browser က JavaScript ကို Support မလုပ်တဲ့အခါမျိုးတွေမှာ ပြသပေးတဲ့ စာသားများအတွက် ဖြစ်ပါတယ်။

Example Code

```
<script>
```

     document.getElementById("demo").innerHTML = "Hello JavaScript";

```
</script>
```

<noscript< Sorry, Your browser don't support JavaScript! </noscript>

Try it Yourself!

Tag	Description
<script>	client-side script တွေ ‌ရေးသားဖို့အတွက် အသုံးပြု
<noscript>	JavaScript Support မလုပ်တဲ့ Browser များမှာ ဖေါ်ပြပေးမယ့် စာသားအတွက် အသုံးပြု

Unordered Lists

Writen By Noodle

HTML Unordered Lists

HTML က < ul > tagကို unordered list လို့ ခေါ် ပါတယ်။ bulleted နဲ့ သတ်မှတ်ပါတယ်။

Unordered HTML List

Unodered listတစ်ခုက <ul> tagနဲ့ စပါတယ်။ list itemတစ်ခုစီကို <li>tagနဲ့ စပါတယ်။
List itemများကို bulletsနဲ့ default ထားပါတယ်။

Example

```
<ul>
```
```
<li>Coffee</li>
```
```
<li>Tea </li>
```
```
<li>Milk </li>
```
```
</ul>>
```

Try it yourself

Unordered HTML List - Choose List Item Marker

Cssရဲ့ list-style-type property နဲ့ list itemရဲ့ styleကို ပြောင်းလဲ အသုံးပြုနိုင်ပါတယ်။ဒီproperty မှာအောက်ဖော်ပြထားသည့်valuesကနေ သုံးနိုင်ပါတယ်။

Value	Description
disc	list itemတွေကို default အနေနဲ့ bulletပုံစံတပ်ပါတယ်။
circle	list itemတွေကို အဝိုင်း(circle )ပုံစံ တပ်ပါတယ်။
square	list itemတွေကို လေးထောင့် (square)ပုံစံ တပ်ပါတယ်။
none	list itemတွေကို ဘာမှမတပ်ပါ။

Example - Disc

```
<ul style="list-style-type:disc;" >
```
```
<li>Coffee</li>
```
```
 <li>Tea </li>
```
```
 <li>Milk </li>
```
```
</ul>>
```

Try it yourself

Example - Circle

```
<ul style="list-style-type:circle;" >
```
```
<li>Coffee</li>
```
```
 <li>Tea </li>
```
```
<li>Milk </li>
```
```
</ul>>
```

Try it yourself

Example - Square

```
<ul style="list-style-type:square;" >
```
```
 <li>Coffee</li>
```
```
  <li>Tea </li>
```
```
  <li>Milk </li>
```
```
</ul>>  
```

Try it yourself

Example - None

```
<ul style="list-style-type:none;" >
```
```
 <li>Coffee</li>
```
```
  <li>Tea </li>
```
```
  <li>Milk </li>
```
```
</ul>> 
```

Try it yourself

Nested HTML Lists

Listတွေကို listအတွင်းမှာ listတွေကို စဥ်နိုင်ပါတယ်။

Example

```
<ul>
```
```
<li>Coffee</li>
```
```
<li>Tea
```
```
<ul>
```
```
<li>Black tea</li>
```
```
<li>Green tea</li>
```
```
</ul>
```
```
</li>
```
```
<li>Milk</li>
```
```
</ul>
```

Try it yourself

List itemတွေမှာ new list တစ်ခု နဲ့ အခြား HTML elements တွေ (images and links,etc...)တွေ ပါဝင်နိုင်ပါတယ်။

Horizontal List with CSS

HTML listတွေကို CSSသုံးပြီး နည်းးလမ်းအမျိုးမျိုးသုံးပြီး ပုံစံချနိုင်ပါတယ်။
အသုံးများတဲ့နည်းကတော့ navigation menuပြုလုပ်ရန်အတွက် listတွေကို horizontallyအတိုင်း ပုံစံခြင်းဖြစ်ပါတယ်။

Example

```
  <!DOCTYPE html >
```
```
  < html >
```
```
  < head>
```
```
  < style>
```
```
 ul {
```
```
    list-style-type: none;
```
```
    margin: 0;
```
```
   padding: 0;
```
```
   overflow: hidden;
```
```
  background-color: #333333;
```
```
 }
```
```
  li {
```
```
  }
```
```
 li a {
```
```
   display: block;
```
```
   color: white;
```
```
  text-align: center;
```
```
  padding: 16px;
```
```
 text-decoration: none;
```
```
  }
```
```
 li a:hover {
```
```
  background-color: #111111;
```
```
  }
```
```
 < /style>
```
```
 < /head>
```
```
  < body>
```
```
 < ul >
```

  < li > < a href="#home">Home < /a> </li>

  < li > < a href="#news">News < /a> < /li>

 < li > < a href="#contact">Contact > < /a > /li>

 < li > < a href="#about">About > /a< < /li>

```
 < /ul>
```
```
 < /body>
```
```
 < /html>
```

Try it yourself

Chapter Summary

HTML ရဲ့ unordered listကိုသတ်မှတ်ရန် < ul > သုံးနိုင်ပါတယ်။
list itemတွေရဲ့ ပုံစံကို သတ်မှတ်ရန် CSSရဲ့ list style typeကို သုံးပါတယ်။
list itemတွေကို သတ်မှတ်ရန် HTMLရဲ့ < li >element ကိုသုံးပါတယ်။
Listတစ်ခုအတွင်းမှာ နောက်ထပ်listတစ်ခု စီနိုင်ပါတယ်။
List itemsတွေအတွင်းမှာ အခြား HTML element တွေ ပါဝင်နိုင်ပါတယ်။
Listတွေကို horizontallyစီရန်အတွက် CSS property ဖြစ်တဲ့ float:leftကို သူံးနိုင်ပါတယ်

HTML List Tags

Tag	ဖော်ပြချက်
< ul >	unordered listကို သတ်မှတ်ပါတယ်။
< ol >	ordered listကို သတ်မှတ်ပါတယ်။
< li >	list itemတစ်ခုကို သတ်မှတ်ပါတယ်။
< dl >	description listကို သတ်မှတ်ပါတယ်။

HTML Iframe

Writen By Zayar Aung

iframe ကို Webpage တစ်ခုအတွင်းမှာ နောက်ထပ် Webpage ကို ဖေါ်ပြချင်တဲ့ အခါမျိုးတွေမှာ အသုံးပြုပါတယ်။

HTML iframe Syntax

<iframe> tag ကို html Document တစ်ခုကို အခြား html document ထဲမှာ ဖေါ်ပြလိုတဲ့ အခါမျိုးတွေမှာ အသုံးပြုရပါတယ်။

Syntax

<iframe src="url" title="Description"> </iframe>

Tip :<iframe> ကိုသုံးတဲ့အခါမှာ title Attribute ကိုထည့်ပေးတာဟာ အလေ့အအကျင့်ကောင်းတစ်ခုပါ။ အကယ်၍ အကြောင်းတစ်ခုခုကြောင့် ကျွန်တော်တို့ ချိတ်ဆက်ခေါ်ယူထားတဲ့ Webpage က ရောက်မလာခဲ့ရင် အဲဒိ title ထဲက စာကိုပြပေးတဲ့အတွက် User တွေကို ဘာပြလိုတယ်ဆိုတာ သိသာစေမှာပါ။

Height and Width အသုံးပြုခြင်း

<iframe> မှာ height နှင့် width Attribute များကို frame ရဲ့ အမြင့်နှင့် အကျယ်များသတ်မှတ်ရန်အတွက် အသုံးပြုနိုင်ပါတယ်။

src ဆိုတာက Source ကိုအတိုကောက်ဆိုလိုတာဖြစ်ပြီး၊ src value မှာ file လမ်းကြောင်းတွေ ပေးရလေ့ရှိပါတယ်။ ဥပမာ - ဓါတ်ပုံလမ်းကြောင်း၊ .html လမ်းကြောင်း၊ .css လမ်းကြောင်း စသည်ဖြင့်။

height နှင့် width Attribuet များ၏ default Unite မှာ pixel ဖြစ်ပါတယ်။

Example Code

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"> </iframe>

Try it Yourself!

ဒါမှမဟုတ် style Attribute သုံးပြီး CSS height နှင့် width properties များအသုံးပြုပြီးတော့လည်း အမြင့်နှင့် အကျယ်ကို သတ်မှတ်နိုင်ပါတယ်။

Example Code

<iframe src="demo_iframe.htm" style="height: 200px; width: 300px;" title="Iframe Example"> </iframe>

Try it Yourself!

Iframe Border

ပုံမှန်အားဖြင့်တော့ <iframe> မှာ ဘောင်တစ်ခုပါပြီးသားပါ။ အဲဒီဘောင်ကို ပြောင်းလဲဖို့အတွက်ကတော့ frameborder ဆိုတဲ့ Attribute ကိုအသုံးပြုလိုရပါတယ်။ frameborder နောက်က Value တွေကို နံပတ်များဖြင့်ပေးရတာဖြစ်ပါတယ်။ ဥပမာ - frameborder="0" ဆိုရင် ဘောင်မရှိတော့ဘူး။ ဘောင်မထားတော့ဘူးလို့ ဆိုလိုတာဖြစ်ပြီး၊ frameborder="1" ဆိုရင်တော့ ဘောင် 1px ပါမယ်လို့ ဆိုလိုတာပါ။

frameborder Attribute မှာ ဘောင်ရဲ့ အရွယ်အစားကိုသာ ပြင်လို့ရတဲ့အတွက် တကယ်တန်း Style တွေပြင်ကြတဲ့အခါမှာ သိပ်မသုံးပါဘူး။

အသုံးများတဲ့ပုံစံကတော့ style Attribute ထဲက border properties ဖြစ်ပါတယ်။

<iframe> ရဲ့ ဘောင်တွေကို ဖြုတ်ချင်တဲ့အခါ အောက်ပါအတိုင်းသုံးပါတယ်။

Example Code

<iframe src="demo_iframe.htm" style="border: none;" title="Iframe Example"> </iframe>

Try it Yourself!

CSS ကို အသုံးပြုပြီးတော့ ဘောင်ရဲ့ အရွယ်အစား၊ အ‌ရောင် နှင့် အခြားအရာများစွာကို အသေးစိတ်ပြင်လို့ရပါတယ်။

Example Code

<iframe src="demo_iframe.htm" style="border: 2px solid red" title="Iframe Example"> </iframe>

Try it Yourself!

Link target နှင့်တွဲပြီး အသုံးပြုခြင်း

ကျွန်တော်တို့ HTMl Link သင်ခန်းမှာတုန်းက target attribute အကြောင်းကို မှတ်မိကြလိမ့်မယ်လို့ထင်ပါတယ်။ ခုက <iframe> တစ်ကို target ထားတဲ့ link တစ်ခု ဘယ်လိုဖန်တီးမလဲဆိုတာကို ပြောပြမှာပါ။

Link ကိုနှိပ်လိုက်တာအခါမှာ မူရင်း frame ထဲမှာလဲ မပေါ်ဘူး၊ နောက် tab တစ်ခုလဲမဖွင့်ဘူး၊ သတ်မှတ်ထားတဲ့ <iframe> အတွင်းမှာသွားပွင့်စေချင်တာပါ။

ဒီလိုလုပ်ဖို့အတွက် က iframe မှာ name Attribute ကိုအရင်ပေးရပါတယ်။

ပြီးတဲ့အခါ link ရဲ့ target Attribute မှာ ခုဏက iframe ရဲ့ name ကိုထည့်ပေးရပါတယ်။

အောက်က ဥပမာမှာကြည့်ပါ။

Example Code

<iframe src="demo_frame.htm" name="iframe_a" title="Iframe Example"> </iframe>

<a href="https://www.w3schools.com" target="iframe_a"> W3Schools </a>

Try it Yourself!

Chapter Summary

Webpage တစ်ခုပေါ်မှာ အခြား Webpage ကို ဖေါ်ပြဖို့အတွက် <iframe> ကိုသုံးကြပါတယ်။
src Attribute က ဖေါ်ပြချင်တဲ့ webpage ရဲ့ url ကို သတ်မှတ်ပေးဖို့ဖြစ်တယ်။
height and width Attribute တွေဟာ Frame ရဲ့အရွယ်အစားကို သတ်မှတ်ဖို့အတွက် အသုံးပြုပါတယ်။
Frame ဘောင်ကို ပြင်ဆင်ဖို့အတွက် CSS ရဲ့ border properties ကိုအသုံးပြုနိုင်ပါတယ်။

Saturday, December 19, 2020

HTML Id

Writen By Zayar Aung

HTML element တွေကို သီးသန့် id တွေပေးလိုတဲ့အခါမှာ id Attribute ကိုသုံးပါတယ်။

HTML document တစ်ခုမှာ id တစ်ခုကို တစ်ခုထက်ပိုတဲ့ element တွေမှာ မသုံးရပါဘူး။ id တစ်ခုဟာ သက်ဆိုင်ရာ element အတွက်သီးသန့်သာ သုံးရပါမယ်။ HTML decoument တစ်ခုဆိုတာ .html ဖိုင်တစ်ဖိုင်ကို ဆိုလိုတာပါ။

Id Attribute အသုံးပြုခြင်း

id Attribute ဟာ html element တစ်ခုကို သီးသန့် id သတ်မှတ်ဖို့အတွက် သုံးပါတယ်။ သီးသန့် ဖြစ်တဲ့အတွက် id value တွေဟာ ထပ်လို့မရပါဘူး။

id Attribute တွေကို style sheet တွေမှာ သီးသန့် Style များကြေညာရန်နှင့် JavaScript မှာ သီးသန့်လုပ်ဆောင်ချက်များ ပြုလုပ်ရန်အတွက် အသုံးပြုပါတယ်။

Style Sheet များအတွက် id ကိုအသုံးပြုရာမှာတော့ hash (#) နောက်က id value လိုက်ပြီး Style Properties များကို carli braces {...} အတွင်းမှာ ရေးရပါတယ်။ Style Property တစ်ခုဆုံးတိုင်း Semicolum (;) နဲ့ပိတ်ပေးရပါတယ်။ အောက်က ဥပမာ ကိုကြည့်ပါ။

Id Attribute Syntax

```
#id-name{
```
```
     style-property_1 : value;
```
```
     style-property_2 : value;
```
```
}
```

အောက်က ဥပမာမှာဆိုရင် id "myHeader" နဲ့ <h1> element တစ်ခုရှိပါတယ်။ အဲဒီ <h1> element ကို <head> tag ထဲက #myHeader နဲ့ ဖမ်းပြီး Style Property ထည့်ပြထားပါတယ်။

Notic : တကယ်တော့လေ class နဲ့ id တွေက Attribute ပေါ့နော။ သူနောက်က = "value" က Attribute Value ပေါ့နော်။ ဒါပေမယ့် class value "myHeader" , id value "myHeader" စသည်ဖြင့် မပြောတော့ဘဲ class "myHeader", id "myHeader" စသည်ဖြင့်ဘဲ အလွယ်သုံးစွဲလေ့ရှိကြပါတယ်။ ဒီတော့ သင်ခန်းစာများမှာလဲ အဲဒီလိုဘဲ သုံးစွဲသွားပါမယ်။

Example Code

```
<!Doctype HTML>
```
```
<html>
```
```
     <head>
```
```
         <style>
```
```
             #myHeader {
```

                 background-color : lightblue;

```
                 color : black;
```
```
                 padding : 40px;
```
```
                 text-align : center;
```
```
         </style>
```
```
     </head>
```
```
     <body>
```

         <h1 id="myHeader"> My Header </h1>

```
     </body>
```
```
</html>
```

Tyr It Yourself!

id တွေဟာ Case Sensitive ဖြစ်ပါတယ်။

id တွေမှာ character တစ်ခုတော့ အနည်းဆုံးပါရမည်ဖြစ်ပြီး၊ whitespace ( space bar တို့၊ tab တို့) ထည့်ရေးလို့မရပါဘူး။ ( class မျာလည်း အတူတူပါဘဲ။ whitespace တွေထည့်လို့မရပါဘူး။)

Class နှင့် Id ခြားနားချက်များ

class တစ်ခုကို html element တစ်ခုထက်ပိုပြီး သုံးစွဲနိုင်ပေမယ့် ၊ id ကတော့ id တစ်ခုကို element တစ်ခုသာသုံးနိုင်ပါတယ်။ id ကထပ်လို့မရပါဘူး။
Style Sheet တွေကနေ လှမ်းဖမ်းတဲ့အခါမှာ class အတွက်အတွက် period character (.) ကိုသုံးပြီး id အတွက်ကိုတော့ hash character (#) ကိုသုံးပါတယ်။

CSS Tutorials များကိုလေ့လာပြီးတဲ့အခါမှာ ပိုမိုပြီး နားလည်ပါလိမ့်မယ်။

ID နှင့် Link ကိုသုံးပြီး HTML Bookmark ပြုလုပ်ခြင်း

မာတိကာ (သို့) Link တစ်ခုကနေ Website ရဲ့ သတ်မှတ်ထားတဲ့ အပိုင်းတွေကို ခုန်ပျံကျော်လွှား သွားစေချင်တဲ့ အခါမျိုးတွေမှာ Bookmark ကိုသုံးကိုသုံးပါတယ်။

အရမ်းရှည်တဲ့ Webpage တွေမှာ Bookmark တွေဟာ အလွန်အသုံးဝင်ပါတယ်။

Bookmark ပြုလုပ်ဖို့အတွက် အရင်ဆုံး သွားချင်တဲ့နေရာ (Mark) ကို အရင်ဆုံးသတ်မှတ်ပေးရပါတယ်။ ပြီးတော့မှ အဲဒီနေရာကို Link ကနေ ညွှန်းရပါတယ်။

အဲဒိလင့်ကို နှိပ်လိုက်တဲ့အခါမှာ သတ်မှတ်ထားတဲ့ အမှတ်အသားနေရာ (Bookmark) ကို ခုန်ပျံကျော်လွှားပြီး ရောက်သွားမှာပါ။ အမှတ်အသားက link ရဲ့ အပေါ်မှာ ဖြစ်ဖြစ် အောက်မှာ ဖြစ်ဖြစ် ကြိုက်သလိုထားလို့ရပါတယ်။

Example Bookmark

ပထမဆုံး သွားချင်တဲ့နေရာ (Mark) ကို id attribute နဲ့ သတ်မှတ်ပါတယ်။

```
<h2 id="C4"> Character 4</h2>
```

ပြီးတဲ့အခါမှာတော့ Link မှာ အဲဒီ id "C4" ကိုညွှန်းဆိုလိုက်ပါတယ်။ ဒါက Wabpage တစ်ခုထည်းအတွင်းမှာ Bookmark လုပ်နည်းဖြစ်ပါတယ်။

```
<a href="#C4"> Jump to Chapter 4 </a>
```

Try it Yourself!

အခြား Webpage တစ်ခုက Mark ကိုထည့်ချင်ရင်တော့ Absolute URL (or) Relative Url ရဲ့ နောက်ကမှ #mark_name ကိုထည့်ရပါတယ်။ အောက်က ဥပမာမှာ ကြည့်ပါ။

<a href="demo_page.html#C4"> Jump to Chapter 4 </a>

Id ကို JavaScript မှာ အသုံးပြုခြင်း

သတ်မှတ်ထားတဲ့ html element တွေအတွက် အထူးလုပ်ဆောင်ချက်တွေ ပြုလုပ်လိုတဲ့အခါမှာ JavaScript နဲ့တွဲပြီးတော့ id Attribute ကိုအသုံးပြုရပါတယ်။

JavaScript ကနေ html element ကို id သုံးပြီး ဖမ်းချင်တဲ့အခါမှာ getElementById() method ကိုအသုံးပြုပါတယ်။

Example Code

```
<script>
```
```
     function displayResult(){
```

         document.getElementById("myHeader").innerHTML = "Have a nice Day!";

```
     }
```
```
</script>
```

Tyr it Yorslef!

JavaScript အကြောင်းကို ကျွန်တော်တို့ရဲ့ JavaScript Tutorials သင်ခန်းစာများမှာ ပိုမိုလေ့လာပါ။

Chapter Summary

id value တွေဟာ document တစ်ခုအတွင်းမှာ Unique ဖြစ်ရပါမယ်။ .html ဖိုင်တစ်ခုထဲမှာ id value တစ်ခုနှင့် တစ်ခု မတူရဘူးလို့ ဆိုလိုတာပါ။
id Attribute ကို Style Sheet နဲ့ JavaScript တွေကနေ html element တွေကို ဖမ်းဖို့ (Select လုပ်ဖို့၊ ရွေးခြယ်ဖို့ပေါ့နော်) အတွက် အသုံးပြုပါတယ်။
id Value တွေဟာ Case Sensitive ဖြစ်ပါတယ်။ စာလုံး အကြီးအသေး မှားရင် အလုပ်, မလုပ်ပါဘူး။
id Attribute ကို Bookmark တွေလုပ်တဲ့အခါမှာလည်း အသုံးပြုနိုင်ပါတယ်။
JavaScritp ကနေ id တွေကိုလှမ်း‌ခေါ်တဲ့အခါ getElementById() method ကိုသုံးပါတယ်။

HTML Class

Writen By Zayar Aung

HTML Element တွေကို အဖွဲ့အစည်းတစ်ခုအနေနဲ့ စုစည်းလိုတဲ့အခါမှာ class Attribute ကိုသုံးရပါတယ်။

class တစ်ခုထဲကို တစ်ခုထက်ပိုတဲ့ Element တွေမှာထည့်သုံးနိုင်ပါတယ်။

class ဟာ CSS တွေ၊ JavaScript တွေနဲ့ တွဲသုံးရာမှာ မရှိမဖြစ်သုံးရမယ့် အရာတစ်ခုဖြစ်ပါတယ်။ ဒီသင်ခန်းစာမှာပါတဲ့ CSS Code တွေနဲ့ JavaScript Code တွေကို နားမလည်သေးရင်လည်း စိတ်မပူပါနဲ့။ အဓိက က class အကြာင်းကို သိသွားရင် ရပါပြီ။

class Attribute အသုံးပြုခြင်း

class Attribute ဟာ CSS တွေရေးတဲ့အခါမှာ များစွာအသုံးများတဲ့ Attribute တစ်ခုပါ။ JavaScript မှာ Element တွေများစွာကို ဝင်ရောက်ပြင်ဆင်မှုများအတွက်လည်း class ကအသုံးဝင်ပါလိမ့်မယ်။

ဒီအောက်က ဥပမာမှာဆိုရင် class="city" သတ်မှတ်ထားတဲ့ <div> Element သုံးခုရှိပါတယ်။ အဲဒီသုံးခုလုံးဟာ <head> tag ထဲက .city ထဲက Style များအတိုင်း အလုပ်လုပ်နေပါလိမ့်မယ်။ ဆိုလိုတဲ့သဘောကတော့ value တူရှိတဲ့ class တွေအားလုံးကို တစ်နေရာထဲကနေ Style ထည့်နိုင်တယ်ဆိုတာပါ။ ဒါက class သုံးရတဲ့ ရည်ရွယ်ချက်တစ်ခုဘဲ ဖြစ်ပါတယ်။

Example Code

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <style>
```
```
            .city{
```

                background-color: tomato;

```
                color: white;
```

                border: 2px solid black;

```
                margin: 20px;
```
```
                padding: 20px;
```
```
              }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <div class="city">
```
```
            <h2> London </h2>
```

            <p> London is the capital of England.</p>

```
        </div>
```
```
        <div class="city">
```
```
            <h2> Paris </h2>
```

            <p> Paris is the capital of France.</p>

```
        </div>
```
```
        <div class="city">
```
```
            <h2> Takyo </h2>
```

            <p> Tokyo is the capital of Japan.</p>

```
        </div>
```
```
    </body>
```
```
</html>
```

Try it Yourself!

ဒီအောက်က ဥပမာမှာ‌တော့ class="note" သတ်မှတ်ထားတဲ့ <span> Element နှစ်ခုရှိပါတယ်။ အဲဒီ နှစ်ခုလုံးရဲ့ Style ကို <head> Tag ထဲက .note ထဲနဲ့ ထိမ်းချုပ်ပြုပြင်နိုင်တာကို တွေ့ရမှာပါ။

Example Code

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <style>
```
```
            .note{
```
```
                font-size: 120%;
```
```
                color: red;
```
```
              }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```

            <h1> My <span class="note"> Important</span> Heading</h1>

            <p> This is some <span class="note"> important</span> text.</p>

```
    </body>
```
```
</html>
```

Try it Yourself!

class element ကို HTML element တိုင်းမှာထည့်သုံးနိုင်ပါတယ်။

class တွေရဲ့ Value ဟာ Case Sensitive ဖြစ်ပါတယ်။

ရှေ့မှာတော့ HTML CSS အကြောင်း အနည်းငယ် လေ့လာပြီး ဖြစ်မယ်ထင်ပါတယ်။ CSS အကြောင်းပိုမိုလေ့လာချင်ရင်တာ့ CSS Tutorials မှာ သွားလေ့လာနိုင်ပါတယ်။

The Syntax for class

Style Sheet တွေကနေ class ကိုသတ်မှတ်တဲ့အခါမှာ ရှေ့က peroid character လို့ခေါ်တဲ့ (.) လေးခံပြီး သတ်မှတ်ရပါတယ်။

ပြီးတဲ့အခါမှာတော့ CSS Property တွေကို carly braces {...} အတွင်းမှာ ရေးရပါတယ်။

CSS Property တစ်ခုဆုံးတိုင်း semicolum (;) နဲ့ပိတ်ပေးရပါတယ်။ (CSS အကြောင်းမှာလဲလေ့လာပြီး ဖြစ်မှာပါ။)

အောက်က ပုံစံကိုကြည့်ပါ။

CSS Class Syntax

.class-name { CSS Property 1 ; CSS Property 2; }

Multiple Classes

HTML element တစ်ခုမှာ class တစ်ခုထက်ပိုပြီး သတ်မှတ်လို့ရပါတယ်။

html element တစ်ခုမှာ တစ်ခုထက်ပိုတဲ့ class တွေသတ်မှတ်ချင်တယ်ဆိုရင် space ခြားပြီးသုံးပါတယ်။ ဥပမာ = <div class="city main">။ ဒီလိုဆိုရင် ဒီ div ဟာ city class ထဲက CSS Properties တွေအလုပ်လုပ်သလို၊ main class ထဲက CSS Properties တွေလည်း အတူတကွ အလုပ်, လုပ်ကြပါလိမ့်မယ်။

Example Code

```
<h2 class="city main"> London </h2>
```
```
<h2 class="city"> Paris </h2>
```
```
<h2 class="city"> Tokyo </h2>
```

Try it Yourself!

မတူညီတဲ့ Element များမှ အသုံးပြုခြင်း

class တစ်ခုကို မတူညီတဲ့ html element များကနေလည်း အသုံးပြုလို့ရပါတယ်။

ဒီအောက်က ဥပမာမှာဆိုရင် <h2> နှင့် <p> Tag နှစ်ခုလုံးက city ဆိုတဲ့ class မှာပါဝင်ပြီး city ထဲက CSS Properties တွေနှင့် အတူတကွ အလုပ်, လုပ်ကြပါလိမ့်မယ်။

Example Code

```
<h2 class="city"> Paris </h2>
```

<p class="city"> Paris is the capital of France </p>

Try it Yourself!

JavaScript တွင် class အသုံးဝင်ပုံ

class တွေဟာ CSS တွေအတွက်ဘဲ မဟုတ်ပါဘူး JavaScript တွေအတွက်လည်း အသုံးဝင်ပါသေးတယ်။

JavaScript မှာ class တွေကို ခေါ်ယူချင်ရင် getElementByClassName() ဆိုတဲ့ Method ကိုသုံးပါတယ်။

Example Code

```
<scritp>
```
```
     function myFunction(){
```

         var x = document.getElementByClassName("city")

```
         for (var i = 0; i < x; i++){
```

             x[i].style.display = "none" ;

```
          }
```
```
     }
```
```
</scritp>
```

Try it Yourself!

JavaScript Code တွေကို နားမလည်လို့ မစိုးရိမ်ပါနဲ့။

JavaScript အကြောင်းကို ပိုမိုသိရှိနိုင်ဖို့ ကျွန်တော်တို့ရဲ့ JavaScript Tutorials မှာ သွားရောက်လေ့လာနိုင်ပါတယ်။

Chapter Summary

Element တစ်ခုမှာ class တစ်ခုထက်ပိုပြီး အသုံးပြုနိုင်ပါတယ်။
Classes တွေကို CSS နဲ့ JavaScript တွေက သူတို့လိုချင်တဲ့ Element တွေကို ရွေးချယ် သတ်မှတ်ဖို့အတွက် အသုံးပြုပါတယ်။
class Attribute ကို html element တိုင်းမှာ အသုံးပြုနိုင်ပါတယ်။
class Name (or Value) တွေဟာ case sensitive ဖြစ်ပါတယ်။
မတူညိတဲ့ html element များလည်း class တစ်ခုထဲကို အတူတူသုံးနိုင်ကြပါတယ်။

Case Sensitve ဖြစ်ပါတယ်ဆိုတာက စာလုံး အသေးအကြီး မှားလို့မရဘူးဆိုလိုတာပါ။ အားလုံး သိပြီးလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။

မရှင်းတာ၊ နားမလည်တာ၊ လိုအပ်တာများရှိရင် Comment ရေးပေးခဲ့ပါဗျာ......

Friday, December 18, 2020

HTML Block & Inline

Writen By Zayar Aung

HTML Element တိုင်းမှာ Element အမျိုးအစားပေါ်မူတည်ပြီးတော့ Webpage ကြည့်ရှုသူကို ဘယ်လို ဖေါ်ပြပေးရမယ်ဆိုတာကို သတ်မှတ်ထားတာတွေ ရှိပြီးသားပါ။

အဓိကအားဖြင့် အဲဒီလို သတ်မှတ်ထားတဲ့ တန်ဖိုး (၂) ခုရှိပါတယ်။ အဲဒါတွေကတော့ Block နှင့် Inline ဆိုပြီးတော့ ဖြစ်ပါတယ်။

Block-Level Elements

Block-Level Elemnets များဟာ အမြဲတန်း စာကြာင်းအသစ်တစ်ကြောင်းကနေစပြီး သူယူလို့ရတဲ့ အကျယ်ကို အပြည့်ယူပါတယ်။

ဆိုလိုတဲ့သဘောကတော့ အလျှားလိုက်အားဖြင့် နေရာအပြည့်ယူပြီး သီးခြားရပ်တည်ပါတယ်။ သူရဲ့ ရှေ့နဲ့ နောက်မှာ အခြား Element တွေကို နေရာယူခွင့်မပေးပါဘူး။

ဒီအောက်က ဥပမာကို ကြည့်ပါ။ စာကြောင်းက ဆုံးသွားပြီးနောက်မှာ နေရာအလွတ်ရှိနေသေးပေမယ့်။ အဲဒိနေရာလွတ်ကိုပါ သူနေရာအဖြစ် ယူလိုက်ပါတယ်။ အခြား Element တွေကို ဝင်နေရာယူခွင့်မပေးပါဘူး။

<div> Element ဟာ Block-Level Element တစ်ခုဖြစ်ပါတယ်။

Example

```
<div> Hello Wrold </div>
```

‌Try it Yourself!

ဒီအောက်ကမှာတော့ Block-Level Elements တွေကို စာရင်းလုပ်ထားပါတယ်။

<aside>

<dd>

<div>

<dl>

<dt>

<form>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

Inline Element

Inline Element တွေကတော့ စာကြောင်းအသစ်က မစတင်သလို, နောက်ကိုလည်း နေရာမပြည့်မယူပါဘူး။ သူ့ Content ရှိသလောက်သာ နေရာယူပါတယ်။

အောက်က ဥပမာမှာကြည့်ပါ။

<span> Element ဟာ Inline-Level Element တစ်ခုဖြစ်ပါတယ်။

Example

```
<span> Hello World </span>
```

Try it Yourself!

ဒီအောက်မှာတော့ Inline Element တစ်ချို့ကို စာရင်းလုပ်ထားပါတယ်။

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<output>

<q>

<samp>

<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

The <div> Element

<div> Element ဟာ အသုံးအများဆုံး HTML Element လိုတောင်ပြောလို့ရမယ်ထင်ပါတယ်။

<div> ကို HTML Element တွေကို အုပ်စုဖွဲတဲ့အခါမှာ သုံးပါတယ်။

<div> မှာ ထူးထူးခြားခြား Attribute တွေသုံးလို့မရပါဘူး။ Element အားလုံး နှင့် ဆိုင်တဲ့ style, class, id စတဲ့ Attribute တွေဘဲ သုံးလို့ရပါတယ်။

CSS အသုံးပြုတဲ့အခါမှာတော့ <div> ဟာ ဒီဇိုင်းအုပ်စုတွေ ဖွဲဖို့ အတွက် အသုံးများပါတယ်။

Example Code

<div style="background-color: black; color: white; padding: 20px;">

```
     <h2> London </h2>
```

     <p> London is the capital city of England. It is the most

          populous city in the United Kingdom, with a

          metropolitan area of over 13 million inhabitants. </p>

```
</div>
```

Try it Yourself!

The <span> Element

<span> Element ကို Text တွေ၊ Document တွေထဲမှာ Inline အနေနဲ့ အုပ်စုဖွဲ့ဖို့ အတွက် အသုံးပြုပါတယ်။

<span> မှာလည်း ထူးခြားတဲ့ Attribute တွေမရှိဘဲ၊ style, class, id Attribute တွေသာ သုံးလို့ရပါတယ်။

CSS နဲ့တွဲသုံးတဲ့အခါမှာတော့ <span> ဟာ Text တွေအတွက် ဒီဇိုင်းထည့်ဖို့အတွက် အသုံးများလာပါတယ်။

Example Code

<p> My mother has <span style="color: blue; font-weight: bold;"> Blue </span> eyes and my father has <span style="color: darkolivergreen; font-weight: bold;"> dark green </span> eyes.</p>

Try it Yourself!

Chapter Summery

Block နှင့် Inline ဆိုပြီး html element တွေဖေါ်ပြတဲ့ပုံစံ နှစ်မျိုးရှိတယ်။
Block-level Element မှာဆိုရင် အလျှားလိုက်နေရာတစ်ခုလုံးကို အပြည့်ယူလိုက်တယ်။
Inline element ကတော့ သူ့ Content စာဘဲနေရာယူပြီး ရှေ့နဲ့နောက်မျာ အခြား Element တွေကိုနေရာပေးတယ်။
<div> element က Block-level Element ဖြစ်ပြီး html element တွေအုပ်စုဖွဲ့ဖို့အတွက် အသုံးများတယ်။
<span> ကတော့ inline element ဖြစ်ပြီး text တွေကို ဒီဇိုင်းလုပ်နိုင်ဖို့အတွက် အသုံးများတယ်။

HTML List : Description Lists

Writen By Zayar Aung

HTML မှာ Description List ကိုလည်း အသုံးပြုနိုင်ပါတယ်။ ဒါပေမယ့် သိပ်ပြီး အသုံးမပြုကြတာတွေ့ရတယ်။

ဒီ Unorder List ကိုဘဲ Style ထည့် Nested လုပ်ပြီး သုံးကြတာများပါတယ်။

သို့သော် လိုအပ်လာတဲ့အချိန်မျိုးမှာ လွယ်လွယ်ကူကူ သုံးလို့ရအောင် မှတ်သားထားသင့်ပါတယ်။

Description List

Description List ကတော့ နာမည်အတိုင်းပါဘဲ Main Item တစ်ခုရှိမယ်။ အဲဒီ Item ကိုရှင်းလင်းဖေါ်ပြချက် တစ်ခုရှိမယ်။ အဲဒီပုံစံနဲ့သွားပါတယ်။

Description List ကတော့ အသုံးနည်းပါတယ်။

Description List တွေကို <dl> tag နဲ့စတင်ပြီး dl ဆိုတာက Description List ရဲ့ အတိုကောက်ပါ။

အပေါ်မှာ ပြောခဲ့သလိုဘဲ အဓိကအချက်အလက်ရှိမယ်။ အဲဒိအဓိကအချက်အလက်ကိုတော့ <dt> tag နဲ့သတ်မှတ်နိုင်ပါတယ်။ dt ဆိုတာ Discription Title ပေါ့ဗျာ။

အဲဒီ Item အတွက် ရှင်းလင်းဖေါ်ပြချက်ကိုတော့ <dd> Tag ထဲမှာရေးပါတယ်။ dd ဆိုတာကတော့ Description Data ပေါ့ဗျာ။

Example Code: Description List

```
<dl>
```
```
     <dt> Coffee </dt>
```
```
         <dd> Black hot drink </dd>
```
```
     <dt> Coffee </dt>
```
```
         <dd> White cold drink </dd>
```
```
</dl>
```

Try it Yourself!

Course Summery

HTML Description List ရေးသားဖို့အတွက် <dl> Tag ကိုအသုံးပြုပါတယ်။
Description List Item ရေးသားဖို့အတွက် <dt> Tag ကိုအသုံးပြုပါတယ်။
List Item ရဲ့ Description ကိုရေးသားဖို့အတွက် <dd> Tag ကိုသုံးပါတယ်။

HTML List Tag

Tag	Description
<ul>	Unorder List သတ်မှတ်ရန်။
<ol>	Order List သတ်မှတ်ရန်။
<li>	အချက်အလက်များ သတ်မှတ်ရန်။
<dl>	Description List သတ်မှတ်ရန်။
<dt>	Description List ရဲ့ အချက်အလက် သတ်မှတ်ရန်။
<dd>	Description List ရဲ့ အချိက်အလက်ရဲ့ ရှင်းလင်းဖေါ်ပြချက် သတ်မှတ်ရန်။

HTML Tag များအားလုံးကို ကြည့်ရှုလိုပါက ‌HTML Tag Reference မှာသွားကြည့်နိုင်ပါတယ်။

မရှင်းလင်းတာ၊ မေးမြန်းလိုတာ၊ လိုအပ်တာများရှိရင် Comment မှာရေးခဲ့ပေးပါ။

HTML Lists : Order Lists

Writen By Zayar Aung

Order List တွေရေးသားဖို့အတွက် <ol> tag ကိုအသုံးပြုပါတယ်။ HTML Order list မှာ အင်္ဂလိပ် ဂဏန်း၊ ရောမ ဂဏန်း နှင့် အင်္ဂလိပ် အက္ခရာများဖြင့် သတ်မှတ်ရေးသားနိုင်ပါတယ်။

Order HTML List

အရေအတွက်ကို ရေတွက်ပြီး List လုပ်ချင်တဲ့အချိန်မျိုးတွေမှာ Order List ကိုအသုံးပြုရပါတယ်။

Order List တွေကို <ol> tag နဲ့ စတင်ပြီးတော့ ol ဆိုတာ Order List ရဲ့ အတိုကောက်ပါ။

ပြီးရင်တော့ ထုံးစံအတိုင်း အချက်အလက်တစ်ချင်းစီကို <li> tag ထဲမှာ ထည့်ရေးပါတယ်။

ပုံမှန်အားဖြင့် Order List တွေရဲ့ ရှေ့မှာ 1 , 2 , 3 စတဲ့နံပတ်တွေနဲ့ အမှတ်အသားလုပ်ပေးပါတယ်။

Example Code: Order List

```
<ol>
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Order List type Attribute

type Attribute ဟာ Order List ရဲ့ List အမှတ်သား (list item marker type) ကို သတ်မှတ်ပေးဖို့အတွက် အသုံးပြုပါတယ်။

List အမှတ်အသား (list item marker type) ဆိုတာ List တွေရဲ့ ရှေ့မှာ ဖေါ်ပြပေးမယ့် သင်္ကေတကို ဆိုလိုပါတယ်။

Type	Description
type="1"	အင်္ဂလိပ်ဂဏန်း စဉ်ဖြင့် ဖေါ်ပြပေးမည်။ (Default)
type="A"	အင်္ဂလိပ်အက္ခရာ အကြီးဖြင့် ဖေါ်ပြပေးမည်။
type="a"	အင်္ဂလိပ်အက္ခရာ အသေးဖြင့် ဖေါ်ပြပေးမည်။
type="I"	ရောမဂဏန်းစဉ် အကြီးဖြင့် ဖေါ်ပြပေးမည်။
type="i"	ရောမဂဏန်းစဉ် အသေးဖြင့် ဖေါ်ပြပေးမည်။

Order List : Numbers

```
<ol type="1">
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Order List : Uppercase Letters

```
<ol type="A">
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Order List : Lowercase Letter

```
<ol type="a">
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Order List : Uppercase Roman Numbers

```
<ol type="I">
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Order List : Lowercase Roman Numbers

```
<ol type="i">
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Control List Counting

ပုံမှန်အားဖြင့် Order List များရဲ့ အစဉ်ကို 1 ကနေ စ,ပါတယ်။ အကယ်လို့ အဲဒိစမှတ်ကို မိတ်ဆွေအနေနဲ့ ပြောင်းလဲချင်တယ် ဆိုရင်တော့ start Attribute ကိုသုံးရပါလိမ့်မယ်။

အောက်က ဥပမာကတော့ 50 ကနေ စတင်ပြီး ရေတွက်ပေးမယ့် ဥပမာ Code ဖြစ်ပါတယ်။

Example

```
<ol start="50">
```
```
     <li> Coffee </li>
```
```
     <li> Tea </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

Nested HTML lists

Nested ဆိုတာက List တစ်ခုအတွင်းမှာ နောက်ထပ် List တစ်ခုသုံးတာကို ပြောတာပါ။ အဲဒီလိုလည်း အသုံးပြုနိုင်ပါတယ်။

Example

```
<ol>
```
```
     <li> Coffee </li>
```
```
     <li> Tea
```
```
         <ol>
```
```
             <li> Black Tea </li>
```
```
             <li> Green Tea </li>
```
```
         </ol>
```
```
     </li>
```
```
     <li> Milk </li>
```
```
</ol>
```

Try it Yourself!

<li> tab အတွင်းမှာ နောက်ထပ် List Tag တွေထားနိုင်သလို၊ <img>တို့ <a> တို့လို အခြား HTML Element များလည်း ထည့်လို့ရပါတယ်။

Chapter Summary

Order List အတွက် <ol> ကိုအသုံးပြုပါတယ်။
List အမှတ်အသားသတ်မှတ်ဖို့အတွက် type Attribute ကိုသုံးတယ်။
List Item တွေအတွက်တော့ <li> ကိုသုံးရပါတယ်။
List ထဲမှာ နောက်ထပ် List တစ်ခုထပ်ထည့်လို့ရတယ်။
<li> tag ထဲမှာ အခြား HTML Element တွေလည်းထည့်သုံးလို့ရပါတယ်။

HTML List Tag

Tag	Description
<ul>	Unorder List သတ်မှတ်ရန်။
<ol>	Order List သတ်မှတ်ရန်။
<li>	အချက်အလက်များ သတ်မှတ်ရန်။
<dl>	Description List သတ်မှတ်ရန်။
<dt>	Description List ရဲ့ အချက်အလက် သတ်မှတ်ရန်။
<dd>	Description List ရဲ့ အချိက်အလက်ရဲ့ ရှင်းလင်းဖေါ်ပြချက် သတ်မှတ်ရန်။

HTML Tag များအားလုံးကို ကြည့်ရှုလိုပါက ‌HTML Tag Reference မှာသွားကြည့်နိုင်ပါတယ်။

မရှင်းလင်းတာ၊ မေးမြန်းလိုတာ၊ လိုအပ်တာများရှိရင် Comment မှာရေးခဲ့ပေးပါ။

Web Design Tutorials

Web Development Tutorials

UI/UX Tutorials

How To

Knowledge Article

How To

HTML Tutorials

Documentation

Writer Links

Writer Data

JavaScript Tutorials

Friday, December 25, 2020

CSS Comments ကို ဘယ်နေရာမှာ အသုံးပြုလဲ ?

CSS Comments ကို ဘယ်လိုအသုံးပြုလဲ ?

CSS Comments

CSS Selectors ကို အသုံးပြုဖို့ နည်း ၅ နည်းရှိပါတယ်။

၁) Simple Selectors

၂) Combinator selectors

၃) Pseudo-class selectors

၄) Pseudo-elements selectors

၅) Attribute selectors

Tuesday, December 22, 2020

Three Ways to Insert CSS

External CSS

Example

style.css

Internal CSS

Example

Inline CSS

Example

Multiple Style Sheets

Monday, December 21, 2020

Application Structure in laravel

Laravel's app directory

Bootstrap directory

Config directory

*Database directory

Public directory

Resource directory

*Routes directory

Storage directory

CSS Syntax

Example

Example Explained

Sunday, December 20, 2020

JavaScript Example

My First JavaScritp

HTML <script> Tag

Example Code

JavaSctipt နဲ့ဘာတွေလုပ်နိုင်သလဲ?

My First JavaScript

My First JavaScript

HTML <noscript> Tag

Example Code

HTML Unordered Lists

Unordered HTML List

Example

Unordered HTML List - Choose List Item Marker

Example - Disc

Example - Circle

Example - Square

Example - None

Nested HTML Lists

Example

Horizontal List with CSS

Example

Chapter Summary

HTML List Tags

HTML iframe Syntax

Syntax

Height and Width အသုံးပြုခြင်း

Example Code

Example Code

Iframe Border

Example Code

Example Code

Link target နှင့်တွဲပြီး အသုံးပြုခြင်း

Example Code

Chapter Summary

Saturday, December 19, 2020