html ဖိုင်ဖွဲ့စည်းပုံ၊ html element အကြောင်း၊ html attribute အကြောင်းတွေ မိတ်ဆက်ပေးပြီးသွားပြီဆိုတော့ အရင် html ဖိုင်တည်ဆောက်တဲ့နေရာကပြန်စလိုက်ပါမယ်။
အရင်တည်ဆောက်ပြီးသား index လို့အမည်ရှိတဲ့ html ဖိုင်တစ်ခုရှိပါတယ်။ ၄င်းရှိပြီးသား index.html ကိုပဲ လိုအပ်တဲ့ web page တစ်ခုအဖြစ်ဖန်တီးတည်ဆောက်ပါမယ်။
ပထမဆုံးအနေနဲ့ borwser ရဲ့ tab မှာပေါ်ချင်တဲ့စာသားအတွက် head ပိုင်းထဲမှာရှိတဲ့ <title></title> ထဲမှာ "Digital Duty - Freelance Digital Services" ဆိုတာရိုက်ထည့်ပါမယ်။
<title>Digital Duty - Freelance Digital Services</title> ဆိုပြီးဖြစ်လာပါမယ်။ အခု index.html ကို browser တစ်ခုခုနဲ့ဖွင့်ကြည့်လိုက်ရင် browser ရဲ့ tab မှာ "Digital Duty - Freelance Digital Services" ကိုဖော်ပြနေတာကို တွေ့ရမှာပါ။
<title> element ထဲမှာ မည့်သည့်စားသားမျှ မရိုက်ထည့်လျှင် ဖိုင်းအမည်ကိုသာဖော်ပြနေတာကိုတွေ့ရမှာပါ။ အခုလက်ရှိမှာ ဖိုင်အမည်က index.html ဖြစ်တဲ့အတွက် browser ရဲ့ tab မှာ index.html ကိုဖော်ပြနေတာကိုတွေ့ရမှာပါ။
content တွေအတွက်ကိုတော့ <body></body> ထဲမှာရေးရမှာပါ။
လုပ်ငန်း logo အရင်ဆုံးထည့်ပါမယ်။ ၄င်းအတွက် <img> ကိုသုံးပါမယ်။ <img> ရဲ့ attribute ဖြစ်တဲ့ src attribute မှာ logo ပုံရဲ့တည့်နေရာကိုထည့်ပေးရပါမယ်။ ပုံရဲ့တည်နေရာကိုထည့်တဲ့အခါမှာ တည်နေရာတိကျမှန်ကန်ဖို့လိုပါတယ်။ အခု index.html ဖိုင်က desktop ပေါ်မှာရှိပါတယ်။ logo မှာထည့်သွင်းမည့်ပုံ ကလည်း desktop ပေါ်မှာ ရှိမယ်ဆိုရင်တော့
<img src="logo.png" alt="Digital Duty - Freelance Digital Services">
လို့ရေးလိုက်ရင် index.html ကို browser တစ်ခုခုနဲ့ ဖွင့်လိုက်လျှင် logo ပုံကိုတွေ့ရမှာပါ။
ဆိုကြပါစို့ logo ပုံက D အောက်က logo ဆိုတဲ့ folder ထဲ့မှာရှိတယ်ဆိုရင် <img> ရဲ့ src attribute မှာ D:\logo\logo.png ဆိုတဲ့ လမ်းကြောင်းထည့်ပေးလိုက်လျှင်လည်း index.html ဖိုင်ကို browser တစ်ခုခုနဲ့ဖွင့်လိုက်လျှင်လည်း logo ပုံကိုတွေ့ရမှာပါ။
ထည့်သွင်းချင်တဲ့ပုံက online တစ်နေရာမှာ ရှိတယ်ဆိုလျှင်လည်း တည်နေရာ url ကိုတည့်သွင်းလျှင်လည်း <img> ရဲ့ src attribute ကအလုပ်လုပ်ပါတယ်။
https://digitalduty.org/storage/settings/July2020/qew4AsAQkHnrYZSQSk84.png
ဒါက ကျွန်တော်တို့ ဝက်ဆိုက်ရဲ့ logo ရဲ့ တည်နေရာ url ဖြစ်ပါတယ်။ ဖော်ပြပါ url ကို <img> ရဲ့ src attribute ကအလုပ်လုပ်ပါတယ်။
တကယ်ဝက်ဆိုက်ရေးသားတဲ့အခါမှာတော့ လိုအပ်တဲ့ ဖိုင်၊ ပုံ တွေကို project တည်နေရာမှာပဲ သတ်မှတ်နေရာမှာပဲ တစ်စုတစ်စည်းတည်းထားပါတယ်။
လုပ်ငန်းအမည်ထည့်ပါမယ်။ လုပ်ငန်းအမည်အတွက် <h1> ကိုသုံးပါမယ်။ ဘာလို့ <h1> ကိုသုံးရတာလဲဆိုတော့ page တစ်ခုရဲ့ အဓီကအကြောင်းအရာ (သို့) ခေါင်းစဉ်ကို search engine ကိုပြောဖို့အတွက်ပါ။
<h1>Digital Duty - Freelance Digital Services</h1>
လုပ်ငန်းရဲ့ ဝန်ဆောင်မှုတွေကိုထည့်ပါမယ်။ ဝန်ဆောင်မှုတွေကိုကိုယ်စားပြုတဲ့ ပုံတစ်ခုနဲ့ စာပုဒ်တွေထည့်ပါမယ်။
ပုံအတွက်ကတော့ <img> ကိုပဲသုံးပါမယ်။
<img src="services.jpg" alt="Digital Duty Services">
စာပုဒ်တွေအတွက် <p> ကိုသုံးပါမယ်။
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Lorem ipsum ဆိုတဲ့စာတွေက developer တွေက နမူနာထည့်သုံးတဲ့စာသားတွေပါ။
အခု content တွေအားလုံးတော့ ထည့်ပြီးသွားပါပြီ သို့ပေမယ့် browser တစ်တစ်ခုနဲ့ဖွင့်ရင်တော့ content တွေအားလုံးကတော့ပါပါရဲ့ ကြည့်ရတာ အဆင်မပြေဖြစ်နေပါလိမ့်မယ်။
ကြည့်ရှုရာတာအဆင်ပြေစေဖို့အတွက် CSS ကိုသုံးပြီးပြင်နိုင်ပါတယ်။