HTML

ပိုၼ်ႉၶၢမ်ႇ HTML

Articles

ၼႄႉၼမ်း

HTML ပဵၼ်သင်?

  • HTML ပဵၼ်ၽႃႇသႃႇပုၼ်ႈတႃႇသၢင်ႈဝႅပ်ႉ (website)
  • HTML ႁပ်ႉၼႃႈတီႈတႃႇ ၼႄၶေႃႈမုၼ်း ၼိူဝ်ဝႅပ်ႉ
  • HTML လၢတ်ႈၼႄ browsers ဝႃႈတေလႆႈၼႄၶေႃႈမုၼ်းသင် လႄႈ ၸိူင်ႉႁိုဝ်
  • HTML လုၵ်ႉမႃးတီႈ Hyper Text Markup Language

    တူဝ်ယၢင်ႇ

    ၶေႃႈသပ်းလႅင်း

    • <!DOCTYPE html> လႄႈၼႄ browser ဝႃႈၼႆႉပဵၼ်ၾႆႇ HTML5
    • <html> ပဵၼ်ၶူင်းသၢင်ႈ (structure) ပိုၼ်ႉၶၢမ်ႇၶွင်ၾႆႇ HTML
    • <head> ၵဵပ်းသိမ်းၶေႃႈမုၼ်း meta မိူၼ်ၼင်ႇ ၸိုဝ်ႈဝႅပ်ႉ
    • <title> ၸိုဝ်ႈၼႃႈလိၵ်ႈ ဢမ်ႇၼၼ် ဝႅပ်ႉ ဢၼ်ၼႄၼိူဝ် browser tab
    • <body> ၼႄၶေႃႈမုၼ်းၼႂ်းဝႅပ်ႉ
    • <h1> ၼႄဝႃႈၼႆႉပဵၼ်ႁူဝ်ၶေႃႈ
    • <p> ၼႄဝႃႈၼႆႉပဵၼ်ထႅဝ်လိၵ်ႈ

      HTML Editors

      ဝၼ်းမိူဝ်ႈၼႆႉ မီးၶိူင်ႈမိုဝ်းပုၼ်ႈတႃႇတႅမ်ႈ HTML တၢင်းၼမ်။ တႄႇဢဝ်ၶိူင်ႈမိုဝ်းဢၼ်ၵိုၵ်းမႃးၼႂ်းၶွမ်း မိူၼ်ၼင်ႇ Notepad (Windows) လႄႈ TextEdit (Mac)။ လိူဝ်သေၶိူင်ႈမိုဝ်းဢၼ်ၵိုၵ်းမႃးၸွမ်း OS ယဝ်ႉ ပႃႈတႂ်ႈၼႆႉပဵၼ်သဵၼ်ႈမၢႆ Software ၸိုဝ်ႈလင်ဢၼ်မီးၽူႈၶူင်သၢင်ႈ (developer) တၢင်းၼမ်ၸႂ်ႉပုၼ်ႈတႃႇႁဵတ်းဝႅပ်ႉ။ 

      1. Notepad++

      Notepad++ ပဵၼ်ၶိူင်ႈမိုဝ်း open-source ပုၼ်ႈတႃႇၶွမ်းၸိူဝ်းပဵၼ် Windows OS။ 

      • ပဵၼ် code editor ဢၼ်မဝ် လႄႈ ႁဵတ်းၵၢၼ်ဝႆး
      • ၵမ်ႉထႅမ်ၵၢၼ်သႂ်ႇ plugin ပုၼ်ႈတႃႇႁဵတ်းၵၢၼ်လၢႆႈလၢၵ်ႇလၢႆးမႃးလိူဝ်ၵဝ်ႇ
      • ၵမ်ႉထႅမ် FTP ဢၼ်ႁဵတ်းႁႂ်ႈၽူႈၶူင်သၢင်ႈၸၢင်ႈ upload ၶေႃႈမုၼ်းၶိုၼ်ႈၼိူဝ် server files ၵမ်းသိုဝ်ႈလႆႈ
      Download

      2. Sublime

      Sublime Text ပဵၼ်ပူဝ်ႇၵႅမ်ႇ text editor ၸိုဝ်ႈသဵင်လင်သုတ်းဢၼ်ၼိုင်ႈ ပုၼ်ႈၽႃႇတႅမ်ႈ code ၵူႈလွင်ႈလွင်ႈ။ ပူဝ်ႇၵႅမ်ႇၼႆႉသႂ်ႇမႃးပႃး –

      • ၵမ်ႉထႅမ်သႂ်ႇပၼ် code ႁင်းၵူၺ်း (smart auto-completion) မိူဝ်ႈတႅမ်ႈ code 
      • ၵမ်ႉထႅမ်ၵၢၼ်သႂ်ႇသီ code (syntax highlighting) တႃႇႁႂ်ႈဢၢၼ်ႇ code ငၢႆႈ
      • တူဝ်ၶူၼ်ႉႁႃ (search) code
      Download

      3. Atom

      Atom ပဵၼ်ပူဝ်ႇၵႅမ်ႇ text editor ဢၼ်ၸိုဝ်ႈလင်သုတ်းဢၼ်ၼိုင်ႈၼႂ်းလုမ်ႈၾႃႉ ယွၼ်ႉပိူဝ်ႈဝႃႈမၼ်းပဵၼ် ပူဝ်ႇၵႅမ်ႇ free ဢၼ်မီး features ပုၼ်ႈတႃႇတႅမ်ႈ code လႆႈတၢင်းၼမ် လႄႈ ၵမ်ႉထႅမ် Windows ၊ Mac ၊ လႄႈ Linux။

      • မီးၶိူင်ႈမိုဝ်း package manger ၼမ်လိူဝ် 80 တူဝ်ၵိုၵ်းမႃးၸွမ်းပူဝ်ႇၵႅမ်ႇ
      • ၵမ်ႉထႅမ်ၸႅၵ်ႇၼႃႈလိၵ်ႈ interface ဢွၵ်ႇပဵၼ်လၢႆဢၼ်လႆႈ ပုၼ်ႈတႃႇၵၢၼ်တႅၵ်ႈၼိူင်း code ဢမ်ႇၼၼ် ႁဵတ်းၵၢၼ်ၸွမ်း ၾႆႇလၢႆလၢႆဢၼ်မိူဝ်ႈလဵဝ်ၵၼ်
      • ၵမ်ႉထႅမ်ၵၢၼ်သႂ်ႇသီ code (syntax highlighting) တႃႇႁႂ်ႈဢၢၼ်ႇ code ငၢႆႈ
      • ၵမ်ႉထႅမ်သႂ်ႇပၼ် code ႁင်းၵူၺ်း (smart auto-completion) မိူဝ်ႈတႅမ်ႈ code 
      Download

      4. Visual Studio Code

      Visual Studio Code ပဵၼ်ပူဝ်ႇၵႅမ်ႇ text editor open-source လုၵ်ႈတီႈ Microsoft။ ပူဝ်ႇၵႅမ်ႇၼႂ်ႉၸႂ်ႉလႆႈၼႂ်း Windows ၊ Mac ၊ လႄႈ Linux။

      • မီးၶိူင်ႈမိုဝ်း debugging ၼႂ်းတူဝ်ပုၼ်ႈတႃႇ တႅမ်ႈ၊ လဵၼ်ႈ၊ လႄႈ ထတ်းလွင်ႈၽိတ်းပိူင်ႈၼႂ်း code
      • ၵမ်ႉထႅမ် WYSIWYG editor
      • ၵမ်ႉထႅမ်ၵၢၼ်ႁဵတ်း project လၢႆလၢႆဢၼ်မိူဝ်ႈလဵဝ်ၵၼ် (multi-root workspace)
      Download

      ပိုၼ်ႉၶၢမ်ႇ HTML

      ၾႆႇ HTML

      • ၾႆႇ  HTML တေလႆႈတႄႇတီႈထႅဝ်လလိၵ်ႈ <!DOCTYPE html> 
      • ၶေႃႈမုၼ်းၵူႈလွင်ႈလွင်ႈတႄႇၵဵပ်းသိမ်းဝႆႉၼႂ်း <html> တေႃႇပေႃးထိုင် </html>
      • ၶေႃႈမုၼ်းဢၼ်တူၺ်းႁၼ်လႆႈၼၼ်ႉ တေလႆႈမီးၼႂ်းၵႄႈၵၢင် <body> လႄႈ </body>

      တူဝ်ယၢင်ႇ

      ႁူႉၸၵ်း DOCTYPE

      • <!DOCTYPE> ပဵၼ်ထႅဝ်လိၵ်ႈဢွၼ်တၢင်းသုတ်းၼႂ်းၾႆႇ HTML
      • <!DOCTYPE> လၢတ်ႈၼႄ browser ဝႃႈၼႆႉပဵၼ် HTML5
      • <!DOCTYPE>  ၼၼ်ႉတႅမ်ႈပဵၼ်တူဝ်လဵၵ်ႉ <!doctype> ၵေႃႈလႆႈ

      ႁူဝ်ၶေႃႈ Headings

      1. ထႅဝ်လိၵ်ႈဢၼ်ပဵၼ်ႁူဝ်ၶေႃႈ (headings) ၼၼ်ႉ တႄႇတီႈ h1 တေႃႇထိုင် h6
      2. h1 ပဵၼ်ႁူဝ်ၶေႃႈဢၼ်လမ်ႇလွင်ႈသုတ်း (ၵမ်ႈၼမ်ယႂ်ႇသုတ်း) လႄႈ h6 ပဵၼ်ႁူဝ်ၶေႃႈဢၼ်ဢမ်ႇလွင်ႈဢေႇသုတ်း  (လဵၵ်ႉသုတ်း)

      ထႅဝ်လိၵ်ႈ (Paragraphs)

      ထႅဝ်လိၵ်ႈၼႂ်း html တႄႇတီႈ <p> လႄႈသုတ်းသဵင်ႈတီႈ </p>

      လိင်ႉ (Links)

      • လိင်ႉ (link) ၼႂ်း html ယူႇၼႂ်းၵႄႈ <a> လႄႈ </a>
      • လိင်ႉဢၼ်တေၵႂႃႇၸူးၼၼ်ႉ တေလႆႈယူႇၼႂ်း href=”သႂ်ႇလိင်ႉဝႆႉတီႈၼႆႈ”

      ၶႅပ်းႁၢင်ႈ (Images)

      • တေလႆႈၸႂ်ႉ <img> ပုၼ်ႈတႃႇသႂ်ႇၶႅပ်းႁၢင်ႈ
      • src = ၸိုဝ်ႈလႄႈတီႈယူႇၶႅပ်းႁၢင်ႈ
      • alt = တူဝ်လိၵ်ႈဢၼ်ၶႂ်ႈၼႄမိူဝ်ႈၶႅပ်းႁၢင်ႈတူၵ်းႁၢႆ (ၵမ်ႈၼမ်ပဵၼ်ၸိုဝ်ႈၶႅပ်းႁၢင်ႈ)
      • width = တၢင်းၵႂၢင်ႈၶႅပ်းႁၢင်ႈ
      • height = တၢင်းသုင်ၶႅပ်းႁၢင်ႈ

      ႁူႉၸၵ်း Elements

      HTML Elements

      HTML element ပဵၼ်ၵၢၼ်ၸႂ်ႉထႅၵ်ႉပိုတ်ႇ (start tag) လႄႈ ထႅၵ်ႉပိၵ်ႉ (end tag)

      <ထႅၵ်ႉပိုတ်ႇ> ၶေႃႈမုၼ်းတီႈၼႆႈ </ထႅၵ်ႉပိၵ်ႉ>

      • ယႃႇလိုမ်းပိၵ်ႉထႅၵ်ႉ </ > ပုၼ်ႈတႃႇလူတ်းယွမ်းၶေႃႈမုၼ်းၽိတ်းပိူင်ႈ
      • ထႅၵ်ႉမၢင်တူဝ်ဢမ်ႇလူဝ်ႇပိၵ်ႉ မိူၼ်ၼင်ႇ <br> လႄႈ <hr>

      ႁူႉၸၵ်း Attributes

      HTML Attributes

      • HTML attributes သႂ်ႇပၼ်ၶေႃႈမုၼ်းၽိူမ်ႉထႅမ် ပုၼ်ႈတႃႇ element ဢမ်ႇၼၼ်ထႅၵ်ႉတူဝ်လႂ်တူဝ်ၼိုင်ႈ
      • attributes တေလႆႈမီးၼႂ်းထႅၵ်ႉပိုတ်ႇ. (open tag) ၵူႈၶၢဝ်းယၢမ်း
      • attributes ၵမ်ႈၼမ်မီးၸိုဝ်ႈ လႄႈ ၶေႃႈမုၼ်း မိူၼ်ၼင်ႇ name=”value”

      href

      ထႅၵ်ႉ <a> ၸႂ်ႉပုၼ်ႈတႃႇသႂ်ႇလိင်ႉ href (ပဵၼ် attribute) ၸ်ႂႉပုၼ်ႈတႃႇလၢတ်ႈၼႄဝႃႈ တေၵႂႃႇၸူးလိင်ႉတီႈလႂ်

      ၼႄမႃး (output)
      ၵႂႃႇတီႈဝႅပ်ႉ ၽူႈၶူင်သၢင်ႈတႆး

      src

      ထႅၵ်ႉ <img> ၸႂ်ႉပုၼ်ႈတႃႇသႂ်ႇၶႅပ်းႁၢင်ႈၼႂ်းဝႅပ်ႉ။ src (ပဵၼ် attribute) ၸႂ်ႉပုၼ်ႈတႃႇၼႄတီႈယူႇၶႅပ်းႁၢင်ႈ။

      ၼႄမႃး (output)

      width လႄႈ height

      ႁဝ်းၸၢင်ႈသႂ်ႇ width (တၢင်းၵႂၢင်ႈ) လႄႈ height (တၢင်းသုင်) ပုၼ်ႈတႃႇတင်ႈတၢင်းၵႂၢင်ႈတၢင်းသုင်ၶႅပ်းႁၢင်ႈဢမ်ႇၼၼ်တိူၵ်ႈလိၵ်ႈ။

      ၼႄမႃး (output)

      alt

      alt ၸႂ်ႉၼႂ်းထႅၵ်ႉၶႅပ်းႁၢင်ႈ <img> ပုၼ်ႈတႃႇသႂ်ႇလႄႈၼႄတူဝ်လိၵ်ႈ သင်ဢမ်ႇထူပ်းႁၼ်ၶႅပ်းႁၢင်ႈ ဢမ်ႇၼၼ် ၶႅပ်းႁၢင်ႈတူၵ်းႁၢႆဝႆႉ

      ၼႄမႃး (output)
      ၶႅပ်းႁၢင်ႈမွၵ်ႇ

      style

      style ၸႂ်ႉပုၼ်ႈတႃႇလႅၵ်ႈလၢႆႈၽၢင်ႁၢင်ႈထႅၵ်ႉ မိူၼ်ၼင်ႇလႅၵ်ႈလၢႆႈသီ၊ ၾွၼ်ႉ၊ လႄႈ တၢင်းယႂ်ႇတူဝ်လိၵ်ႈ။

      ၼႄမႃး (output)

      ၼႆႉပဵၼ်ထႅဝ်လိၵ်ႈသီၶွင်ႇ

      lang

      • lang ၸႂ်ႉပုၼ်ႈတႃႇလၢတ်ႈၼႄဝႃႈ ၽႃႇသႃႇဝႅပ်ႉႁဝ်းပဵၼ်သင်
      • ထုၵ်ႇလီသႂ်ႇ lang ၼႂ်းထႅၵ်ႉ <html> ၵူႈၶၢဝ်းယၢမ်း ပုၼ်ႈတႃႇႁႂ်ႈ search engine ႁူႉၸၵ်းဝႅပ်ႉႁဝ်းလီလိူဝ်ၵဝ်ႇ
      • သင်ပဵၼ်ၾွၼ်ႉ unicode မိူင်းႁူမ်ႈတုမ်မိူင်းမၢၼ်ႈၼႆ ၸႂ်ႉ lang=”my”

      title

      title ၸႂ်ႉပုၼ်ႈတႃႇၼႄထႅဝ်လိၵ်ႈ မိူဝ်ႈဢဝ်မၢဝ်ႉ mouse ၵႂႃႇတမ်းၼိူဝ်ထႅဝ်လိၵ်ႈ ဢမ်ႇၼၼ် ၶႅပ်းႁၢင်ႈ

      ၼႄမႃး (output)

      မွၵ်ႇမူဝ်

      ႁူဝ်ၶေႃႈ Headings

      HTML headings

      HTML headings ပဵၼ်ႁူဝ်ၶေႃႈ ဢၼ်ၼႄၼႂ်းၼႃႈဝႅပ်ႉ (webpage)။

      • ႁူဝ်ၶေႃႈၼၼ်ႉ တႄႇၸႂ်ႉထႅၵ်ႉ <h1> တေႃႇထိုင် <h6>။ 
      • <h1> ပဵၼ်ႁူဝ်ၶေႃႈဢၼ်လမ်ႇလွင်ႈသုတ်း (ၵမ်ႈၼမ်တူဝ်လိၵ်ႈယႂ်ႇသုတ်း) လႄႈ <h6> ၼၼ်ႉပဵၼ်ႁူဝ်ၶေႃႈဢၼ်လမ်ႇလွင်ႈဢေႇသုတ်း (ၵမ်ႈၼမ်တူဝ်လိၵ်ႈလဵၵ်ႉသုတ်း)။
      ၼႄမႃး (output)

      ႁူဝ်ၶေႃႈထီႉ 1

      ႁူဝ်ၶေႃႈထီႉ 2

      ႁူဝ်ၶေႃႈထီႉ 3

      ႁူဝ်ၶေႃႈထီႉ 4

      ႁူဝ်ၶေႃႈထီႉ 5
      ႁူဝ်ၶေႃႈထီႉ 6

      ထႅဝ်လိၵ်ႈ Paragraphs

      HTML Paragraphs

      <p> ပဵၼ်ထႅၵ်ႉပုၼ်ႈတႃႇတႅမ်ႈထႅဝ်လိၵ်ႈ (paragraph)။

      ၼႄမႃး (output)

      ၼႆႉပဵၼ်ထႅဝ်လိၵ်ႈထီႉ 1

      ၼႆႉပဵၼ်ထႅဝ်လိၵ်ႈထီႉ 2

      ၶႅၼ်ႈထႅဝ်လိၵ်ႈ (horizontal rules)

      <hr> ပဵၼ်ထႅၵ်ႉပုၼ်ႈတႃႇၶႅၼ်ႈထႅဝ်လိၵ်ႈ။

      ၼႄမႃး (output)

      ၼႆႉပဵၼ်ႁူဝ်ၶေႃႈထီႉ 1

      ၼႆႉပဵၼ်ထႅဝ်လိၵ်ႈထီႉ 1

      ၼႆႉပဵၼ်ႁူဝ်ၶေႃႈထီႉ 2

      ၼႆပဵၼ်ထႅဝ်လိၵ်ႈထီႉ 2

      တတ်းထႅဝ်လိၵ်ႈ (line breaks)

      <br> ပဵၼ်ထႅၵ်ႉပုၼ်ႈတႃႇတတ်းႁႂ်ႈတူဝ်လိၵ်ႈပဵၼ်ထႅဝ်မႂ်ႇ။

      ၼႄမႃး (output)

      မၢၵ်ႇၸွၵ်း
      မၢၵ်ႇၽႃႈ
      မၢၵ်ႇၶိူဝ်သူမ်ႈ

      Pre Element

      <pre> ပဵၼ်ထႅၵ်ႉဢၼ်ဢမ်ႇလႅၵ်ႈလၢႆႈၽၢင်ႁၢင်ႈထဝ်လိၵ်ႈ ဢမ်ႇၼၼ် လွၵ်းလိၵ်ႈ (space) ဢၼ်လႆႈသႂ်ႇဝႆႉ

      ၼႄမႃး (output)
        ၸိုဝ်ႈ - ၸၢႆးၶမ်း

  ဢႃႇယု - 18

  တီႈၵိူတ်ႇ - တူၼ်ႈတီး

  ၸၢဝ်းၶိူဝ်း - တႆး

      ႁဵတ်းၵၢၼ်ၸွမ်း Forms

      ႁဵတ်းၵၢၼ်ၸွမ်း Graphics

      ႁဵတ်းၵၢၼ်ၸွမ်း Media