Introduction To Create And Edit Webpage

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 ကို အသံုးျပဳသူမ်ားအေနနဲ႕ Mac App Store က Text Wrangler သုိ႕မဟုတ္ Text Mate ကို အသံုးျပဳႏိုင္သည္။

All platform

Platform အားလံုးအတြက္ Sublime Text 2 ကို အသံုးျပဳႏိုင္သည္။ ဒီ စာအုပ္ထဲမွာ ကၽြန္ေတာ္ sublime text 2 နဲ႕ ေရးသားျပသသြားပါမယ္။

HTML File

ေအာက္ကလို code ကို ႏွစ္သက္ရာ Editor တြင္ ေရးသားလိုက္ပါ။ ကၽြန္ေတာ္ကေတာ့ sublime text 2 တြင္ ေရးသားလိုက္ပါသည္။

<html>
<head>
<title>This is title</title>
</head>
<body>
This is body
</body>
</html>

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. Save HTML

Figure 1-3. Notepad ကို အသံုးျပဳျပီး Save သိမ္းျခင္း

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

Figure 1-4.

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

HTML Structure

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

ကၽြန္ေတာ္တုိ႕ <head> လိုမ်ဳိးကိုေတာ့ head tag လိုေခၚပါတယ္။ <body> ဆုိရင္ေတာ့ body tag ေပါ့။ ေနာက္ျပီး <!DOCTYPE html> ဆိုတာကေတာ့ doctype declaration ပါ။ ဘာ document type ျဖစ္သလဲဆိုတာ ေၾကျငာထားတာပါ။ ျဖစ္ႏိုင္တဲ့ document ေတြကေတာ့ SGML , HTML , DTD စတာေတြ ရိွပါတယ္။ အခုေနာက္ပိုင္း HTML 5 မွာေတာ့ ကၽြန္ေတာ္တို႕ အေနနဲ႕

<!DOCTYPE html>

ဆိုၿပီး သံုးလိုက္ရံုပါပဲ။ HTML 4 မွာ ကၽြန္ေတာ္တို႕ေတြဟာ DTD အတြက္ ေအာက္ကလိုမ်ဳိး code ေတြ သံုးခဲ့ပါတယ္။

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">

ယခု စာအုပ္မွာေတာ့ ကၽြန္ေတာ္တုိ႕ေတြဟာ HTML 5 Doctype ကိုပဲ အသံုးျပဳျပီး ေရးသြားမွာ ျဖစ္တဲ့ အတြက္ေတာ့ page ေတြမွာ

<!DOCTYPE html>

ကိုပဲ ေၾကျငာသြားမွာပါ။

View Source

ကၽြန္ေတာ္တို႕ေတြ အေနနဲ႕ အျခား သူေတြေရးထားတဲ့ HTML code ကို browser ကေန တဆင့္ ဖတ္ရႈႏိုင္ပါတယ္။

IE 9

IE 9 မွာ source ၾကည့္ခ်င္ရင္ေတာ့ View ကိုသြားပါ။ တကယ္လုိ႕ View Menu မရိွပါက Alt ကို ႏိွပ္လိုက္ပါ။ Menu ေပၚလာပါမည္။ Menu Bar က View ေအာက္က Source ကုိ ႏိွပ္ပါ။