HTML ကျူတိုရီရယ်

HTML ပင်မစာမျက်နှာ HTML နိဒါန်း HTML တည်းဖြတ်သူများ HTML အခြေခံ HTML အစိတ်အပိုင်းများ HTML အရည်အချင်းများ HTML ခေါင်းစီးများ HTML စာပိုဒ်များ HTML ပုံစံများ HTML Formatting HTML ကိုးကားချက်များ HTML မှတ်ချက်များ HTML အရောင်များ HTML CSS HTML လင့်ခ်များ HTML ပုံများ HTML Favicon HTML ဇယားများ HTML စာရင်းများ HTML Block & Inline HTML အတန်းများ HTML ID HTML Iframes HTML JavaScript HTML ဖိုင်လမ်းကြောင်းများ HTML Head HTML အပြင်အဆင် HTML တုံ့ပြန်မှု HTML ကွန်ပျူတာကုဒ် HTML ဝေါဟာရများ HTML ပုံစံလမ်းညွှန် HTML အကြောင်းအရာများ HTML သင်္ကေတများ HTML အီမိုဂျီများ HTML Charset HTML URL ကုဒ် HTML နှင့် XHTML

HTML ပုံစံများ

HTML ပုံစံများ HTML Form Attribute များ HTML ဖောင်ဒြပ်စင်များ HTML ထည့်သွင်းမှု အမျိုးအစားများ HTML ထည့်သွင်းခြင်း အရည်အချင်းများ HTML Input Form Attributes

HTML ဂရပ်ဖစ်

HTML Canvas HTML SVG

HTML မီဒီယာ

HTML မီဒီယာ HTML ဗီဒီယို HTML အသံ HTML ပလပ်အင်များ HTML YouTube

HTML API များ

HTML Geolocation HTML ဆွဲ/ချပါ။ HTML ဝဘ်သိုလှောင်မှု HTML ဝဘ်အလုပ်သမားများ HTML SSE

HTML နမူနာများ

HTML နမူနာများ HTML Quiz HTML လေ့ကျင့်ခန်းများ HTML လက်မှတ် HTML အနှစ်ချုပ် HTML အသုံးပြုနိုင်မှု

HTML ကိုးကားချက်များ

HTML Tag စာရင်း HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML Browser ပံ့ပိုးမှု HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML Doctypes HTML အက္ခရာအစုံများ HTML URL ကုဒ် HTML လန်းကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ

HTML Layout အစိတ်အပိုင်းများနှင့် နည်းပညာများ


ဝဘ်ဆိုဒ်များသည် ကော်လံအများအပြား (မဂ္ဂဇင်း သို့မဟုတ် သတင်းစာကဲ့သို့) တွင် အကြောင်းအရာများကို ပြသလေ့ရှိသည်။


ဥပမာ

Cities

London

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.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


HTML Layout အစိတ်အပိုင်းများ

HTML တွင် ဝဘ်စာမျက်နှာတစ်ခု၏ မတူညီသော အစိတ်အပိုင်းများကို သတ်မှတ်ပေးသည့် ဝေါဟာရဆိုင်ရာ ဒြပ်စင်များစွာ ပါရှိသည်။

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
HTML5 Semantic Elements များ
  • <header>- စာရွက်စာတမ်း သို့မဟုတ် ကဏ္ဍတစ်ခုအတွက် ခေါင်းစီးတစ်ခုကို သတ်မှတ်သည်။
  • <nav>- လမ်းပြခြင်းလင့်ခ်အစုံကို သတ်မှတ်သည်။
  • <section>- စာတမ်းတစ်ခုရှိ အပိုင်းတစ်ခုကို သတ်မှတ်သည်။
  • <article>- လွတ်လပ်သော၊ ကိုယ်တိုင်ပါရှိသော အကြောင်းအရာကို သတ်မှတ်သည်။
  • <aside>- အကြောင်းအရာမှလွဲ၍ အကြောင်းအရာကို သတ်မှတ်သည် (ဘေးဘားကဲ့သို့)
  • <footer>- စာရွက်စာတမ်း သို့မဟုတ် ကဏ္ဍတစ်ခုအတွက် အောက်ခြေမှတ်စုကို သတ်မှတ်ပါ။
  • <details>- အသုံးပြုသူသည် လိုအပ်ချက်အရ အဖွင့်အပိတ်လုပ်နိုင်သော အပိုအသေးစိတ်အချက်အလက်များကို သတ်မှတ်ပေးသည်။
  • <summary><details>- ဒြပ်စင် အတွက် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည်။

ကျွန်ုပ်တို့၏ HTML Semantics အခန်း တွင် semantic element များအကြောင်း ပိုမိုဖတ်ရှုနိုင်ပါသည် ။


HTML Layout နည်းပညာများ

Multicolumn layout ကိုဖန်တီးရန် မတူညီသောနည်းပညာလေးခုရှိသည်။ နည်းပညာတစ်ခုစီတွင် ၎င်း၏ အားသာချက် အားနည်းချက်များရှိသည်။

  • CSS မူဘောင်
  • CSS float ပိုင်ဆိုင်မှု
  • CSS flexbox
  • CSS ဇယားကွက်


CSS Frameworks များ

သင်၏ အပြင်အဆင်ကို လျင်မြန်စွာ ဖန်တီးလိုပါက W3.CSS သို့မဟုတ် Bootstrap ကဲ့သို့သော CSS framework ကို အသုံးပြုနိုင်ပါသည် ။

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

❯ အခမဲ့ စတင်လိုက်ပါ။

* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။


CSS Float Layout

floatCSS ပိုင်ဆိုင်မှု ကို အသုံးပြု၍ ဝဘ်အပြင်အဆင်တစ်ခုလုံးကို ပြုလုပ်ခြင်းသည် သာမာန် ဖြစ်သည်။ Float သည် လေ့လာရန် လွယ်ကူသည် - သင် floatနှင့် clearဂုဏ်သတ္တိများ အလုပ်လုပ်ပုံကို မှတ်သားထားရန် လိုအပ်ပါသည်။ အားနည်းချက်များ- Floating element များသည် ပျော့ပြောင်းမှုကို ထိခိုက်စေနိုင်သည့် document flow နှင့် ချိတ်ဆက်ထားသည်။ ကျွန်ုပ်တို့၏ CSS Float နှင့် Clear အခန်း တွင် float အကြောင်းပိုမိုလေ့လာပါ ။

ဥပမာ

Cities

London

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.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


CSS Flexbox အပြင်အဆင်

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

ကျွန်ုပ်တို့၏ CSS Flexbox အခန်း တွင် flexbox အကြောင်း ပိုမိုလေ့လာပါ ။

ဥပမာ

Cities

London

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.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


CSS Grid Layout

CSS Grid Layout Module သည် floats နှင့် positioning ကိုအသုံးပြုစရာမလိုဘဲ ဝဘ်စာမျက်နှာများကို ဒီဇိုင်းဆွဲရန် လွယ်ကူစေရန် အတန်းများနှင့် ကော်လံများပါရှိသော grid-based layout system ကို ပေးဆောင်ပါသည်။

ကျွန်ုပ်တို့၏ CSS Grid နိဒါန်း အခန်း တွင် CSS Grids အကြောင်း ပိုမိုလေ့လာပါ ။