Introduction to Creating and Editing Web Pages

Text Editor

Windows Users

WindowsKey+R ကို နှိပ် လိုက်ပါ။ Run Dialog Box တက်လာပါမည်။ ထို့နောက် notepad လို့ရိုက်လိုက်ပါ။ ပြီးလျှင် OK နှိပ်ပါ။ သို့မဟုတ် Notepad++ သွင်းထားပါ။ Notepad ++ ကို ဖွင့်ပြီး HTML စတင် အသုံးပြုနိုင်ပါသည်။

Linux Users

Ubuntu အသုံးပြုသူများအနေနဲ့ HTML အတွက် gedit ကို အသုံးပြုနိုင်ပါသည်။ Applications -> Accessories -> Text Editor ကို ဖွင့်ပါ။ သို့မဟုတ် Alt+F2 နှိပ်ပြီး gedit လို့ ရိုက်လိုက်ပါ။

Mac Users

Mac ကို အသုံးပြုသူများအနေနဲ့ VS Code, Sublime Text, Zed, CotEditor စတဲ့ text editor တစ်ခုခုကို အသုံးပြုနိုင်သည်။

All Platforms

Platform အားလုံးအတွက် Visual Studio Code (VS Code) သို့မဟုတ် Sublime Text ကို အသုံးပြုနိုင်သည်။ ဒီ စာအုပ်ထဲမှာ ကျွန်တော် VS Code နဲ့ ရေးသားပြသသွားပါမယ်။

HTML File

အောက်ကလို code ကို နှစ်သက်ရာ editor တွင် ရေးသားလိုက်ပါ။ ကျွန်တော်ကတော့ VS Code တွင် ရေးသားပြသသွားပါမယ်။

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
This is body
</body>
</html>

Figure 1-2

Figure: 1-2

HTML ရေးသားရာမှာ <html> နဲ့ စပြီး </html> နဲ့ပြန်ပိတ်ရပါတယ်။ အဲဒီကြားမှာ html code တွေရေးရပါတယ။် <head> နဲ့ </head> ကြားတွင် Title ထည့်ထားတာကို တွေ့မှာပါ။ Title သည် Browser ၏ ထိပ် bar တွင် တွေ့မြင်ရန်ဖြစ်သည်။ <body> နဲ့ </body> ကြားမှာ မိမိ နှစ်သက်ရာ စာထည့်သွင်းရေးနိုင်ပါတယ်။

ကျွန်တော် တို့ Save သွင်းတဲ့ အခါမှာ .html နဲ့ သိမ်းပေးဖို့ လိုပါတယ်။ ကျွန်တော် အခု hello.html နာမည် နဲ့ သိမ်းလိုက်ပါတယ်။ Notepad နဲ့ ရေးသူများ အနေနဲ့ file save လုပ်တဲ့ အခါမှာ Save As Type ကို All File လုပ်ခဲ့ဖို့လိုပါတယ်။ ဥပမာ ကို အောက်က ပုံမှာ ကြည့်နိုင်ပါတယ်။

Figure 1-2

Figure 1-2. Save HTML

Figure 1-3

Figure 1-3. Notepad ကို အသုံးပြုပြီး Save သိမ်းခြင်း

ပြီးလျှင် သိမ်းထားတဲ့ File ကို double click နှိပ်ပြီး run လိုက်ပါ။ Web Browser တစ်ခု အနေနဲ့ တက်လာပါမယ်။ ကျွန်တော်ကတော့ Chrome Web Browser ကို သုံးထားတဲ့ အတွက် Chrome နဲ့ တက်လာပါတယ်။ အဲဒီ အခါမှာတော့ အောက်ကလို ပုံ မြင်ရပါမယ်။

Figure 1-4

Figure 1-4.

Tab မှာတော့ <title> နဲ့ </title> ကြားမှာ ရေးထားခဲ့တဲ့ စာလေးကို တွေ့နိုင်ပါတယ်။ Browser ထဲမှာတော့ <body> နဲ့ </body> ကြားမှာ ရေးထားခဲ့တဲ့ စာတွေ ပေါ်မှာပါ။

HTML Structure

HTML ရေးတော့မယ်ဆိုရင် အောက်ဖော်ပြပါ code လိုမျိုး structure ရှိပါတယ်။

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    </body>
</html>

ကျွန်တော်တို့ <head> လိုမျိုးကိုတော့ head tag လိုခေါ်ပါတယ်။ <body> ဆိုရင်တော့ body tag ပေါ့။ နောက်ပြီး <!DOCTYPE html> ဆိုတာကတော့ doctype declaration ပါ။ ဘာ document type ဖြစ်သလဲဆိုတာ ကြေငြာထားတာပါ။ ဖြစ်နိုင်တဲ့ document တွေကတော့ SGML , HTML , DTD စတာတွေ ရှိပါတယ်။ အခုနောက်ပိုင်း modern HTML (HTML5 လို့လည်း ခေါ်ကြပါတယ်) မှာတော့ ကျွန်တော်တို့ အနေနဲ့

<!DOCTYPE html>

ဆိုပြီး သုံးလိုက်ရုံပါပဲ။ HTML 4 မှာ ကျွန်တော်တို့တွေဟာ DTD အတွက် အောက်ကလိုမျိုး code တွေ သုံးခဲ့ပါတယ်။ အခုအခါမှာတော့ ဒီ section ကို historical reference အနေနဲ့သာ သိထားရင် လုံလောက်ပါတယ်။

HTML 4.01 DTDs

HTML 4.01 Strict DTD ဟာ အသုံးပြုခွင့်မပေးတော့တဲ့ tag တွေကို အသုံးမပြုတော့ပါဘူး။ ဥပမာ ။။ font လိုမျိုး tag တွေပေါ့။ Framesets ကိုလည်း အသုံးပြုခွင့်မပေးပါဘူး။

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional လိုမျိုး doctype ကတော့ အသုံးပြုခွင့်မပေးတော့တဲ့ tag တွေကိုလည်း အသုံးပြုနိုင်ပါတယ်။ ဥပမာ။။ font tag ။ သို့ပေမယ့် Frameset ကိုလည်း အသုံးပြုခွင့်မပေးပါဘူး။

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Transitional ကို support လုပ်ပြီး frameset ပါ အသုံးပြုခွင့်ပေးချင်ရင်တော့ အောက်လိုမျိုး Doctype ကြေငြာဖို့ လိုပါတယ်။

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict ကိုတော့ အောက်ကလို ရေးသားနိုင်ပါတယ်။ သူ့ကို ကြေငြာထားရင်တော့ အသုံးမပြုတဲ့ Tag တွေကို အသုံးပြုခွင့်မပေးတော့ပါဘူူး။ နောက်ပြီးတော့ Frameset လည်း အသုံးပြုခွင့်မရှိပါဘူး။ နောက်ပြီးတော့ XML format ကို လိုက်နာဖို့ လိုပါတယ်။

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional ကတော့ အသုံးပြုခွင့်မပေးထားတဲ့ Font Tag လိုမျိုး အသုံးပြုခွင့်ရပါတယ်။ Frameset တော့ အသုံးပြုခွင့်မရှိပါဘူး။ နောက်ပြီး XML format ကို လိုက်နာဖို့ လိုပါတယ်။

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset ကတော့ အသုံးပြုခွင့်မပေးထားတဲ့ Font Tag လိုမျိုး အသုံးပြုခွင့်ရပါတယ်။ Frameset လည်း အသုံးပြုနိုင်ပါတယ်။ နောက်ပြီး XML format ကို လိုက်နာဖို့ လိုပါတယ်။

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 ကတော့ XHTML 1.0 Strict နဲ့ အတူတူပါပဲ။ သူ့မှာကတော့ module တွေ ထပ်ထည့်ခွင့် ပြုထားပါတယ်။

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ယခု စာအုပ်မှာတော့ ကျွန်တော်တို့တွေဟာ modern HTML doctype ကိုပဲ အသုံးပြုပြီး ရေးသွားမှာ ဖြစ်တဲ့ အတွက်တော့ page တွေမှာ

<!DOCTYPE html>

ကိုပဲ ကြေငြာသွားမှာပါ။ WHATWG HTML Living Standard ဟာ ဆက်လက် update ဖြစ်နေတဲ့ standard ဖြစ်ပေမယ့် doctype ကတော့ ဒီပုံစံတိုတိုလေးပဲ ဖြစ်ပါတယ်။

View Source

ကျွန်တော်တို့တွေ အနေနဲ့ အခြား သူတွေရေးထားတဲ့ HTML code ကို browser ကနေ တဆင့် ဖတ်ရှုနိုင်ပါတယ်။

Edge / Modern Browsers

Edge တွင် source ကြည့်ချင်ရင်တော့ right click နှိပ်ပြီး View Page Source ကို နှိပ်လိုက်ပါ။ သို့မဟုတ် Ctrl + U ကို နှိပ်နိုင်ပါသည်။

Figure 1-5

Figure 1-5. View Source

ထိုအခါ အောက်ကလို မျိုး မိမိရေးထားတဲ့ Code ကို ပြန်မြင်ရပါလိမ့်မယ်။

Figure 1-6

Figure 1-6. Browser မှ မြင်ရသော Source Code

Chrome

Chrome မှာဆိုရင်တော့ Menu > Tools > View Source ကို နှိပ်လိုက်ပါ။

Figure 1-7

Figure 1-7. Chrome View Source

အောက်ဖော်ပြပါ ပုံအတိုင်း မြင်ရပါလိမ့်မယ်။

Figure 1-8

Figure 1-8. Source Code at Chrome

Firefox

Firefox မှာ ဆိုရင်တော့ Tool > Web Developers > View Source ကို နှိပ်လိုက်ပါ။

Figure 1-9

Figure 1-9. View Source Menu

အောက်ဖော်ပြပါ ပုံအတိုင်း မြင်ရပါလိမ့်မယ်။

Figure 1-10

Figure 1-10. Source Code