Myanmar Coder Guide

Course Outline from w3school.com

Saturday, November 28, 2020

HTML Basic

Writen By Denny

ဒီ chapter မှာတော့ ကျနော် HTML အခြေခံ ပြောပြပါမယ်

မလေ့လာရသေးရင် ပြဿနာမရှိပါဘူး အောက်မှာ အကုန်ရှင်းပြပေးသွားပါမယ်

HTML Documents

HTML file စရေးရင် အရင်ဆုံး <!DOCTYPE html> ဆိုပြီးကြေငြာရပါမယ်

ပြီးရင် <html> နဲ့စပြီး </html> နဲ့ပိတ်ပေးရပါမယ်

<html> tag ၂ခု ကြားထဲ့မှာ <body> </body> ဆိုပြီးကြေငြာရပါမယ်

Example

<h1>My First Element</h1>
<p>My First Paragraph</p>
Try it yourself

The <!DOCTYPE html> Declaration

<!DOCTYPE html> ကြေငြာခြင်းဖြင့် browsers ကို ဘယ် file ဖွင့်လဲဆိုတာ ပိုပြီးအကူအညီဖြစ်စေတယ်

<!DOCTYPE html>ကို <html> tag မကြေငြာခင်ခေါ်ရပါမယ် </ !DOCTYPE html > ဆိုပြီး လုပ်စရာမလိုပါ

<!DOCTYPE html> ကို ကြိုက်သလိုရေးရပါတယ် ဥပမာ- <!DoCtYpE hTmL>

Example

<!DOCTYPE html>

HTML Headings

HTML Headings က <h1> ကနေ <h6> ထိရှိပါတယ်

<h1> က အကြီးဆုံးဖြစ်ပြီး <h6> က အငယ်ဆုံးဖြစ်ပါတယ်

Example

<h1>This is Heading 1</h1>
<h2>This is Heading 2 </h2>
<h3>This is Heading 3 </h3>
<h4>This is Heading 4 </h4>
<h5>This is Heading 5 </h5>
<h6>This is Heading 6 </h6>
Try it yourself

HTML Paragraphs

HTML Paragraphs tag ကို <p> ဆိုပြီးကြေငြာရပါမယ်

Example

<p>This is paragraph</p>
<p>This is another paragraph</p>
Try it yourself

HTML Links

HTML Link tag ကို <a> ဆိုပြီးကြေငြာရပါမယ်

Example

<a>Link to Facebook</a>
<a>Link to Youtube</a>
Try it yourself

<a> ထဲမှာ href ဆိုပြီးရေးရပါမယ်

href(atttibute) က ဘယ် website ကို သွားစေချင်လဲဆိုတာ ညွန်ပြစေခြင်းဖြစ်ပါတယ်

target="_blank" ကတော့ new tab ဖြင့် website ကိုသွားစေချင်ဖြစ်ပါတယ်

atttibute အကြောင်းကို နောက် chapter တွေမှာ ရှင်းပြပေး သွားမှာဖြစ်ပါတယ်

HTML Images

HTML Paragraphs tag ကို <img> ဆိုပြီးကြေငြာရပါမယ်

Note-သူက အခြား tag တွေလို အပိတ် ထည့်စရာမလိုပါ

<img> အတွင်းမှာ src width hieght ဆိုတဲ့ atttibute တွေကိုထည့်ပေးရပါမယ်

  • src - ကတော့ ကိုယ့်ထည့်မယ့် image လမ်း‌ကြောင်းကို ထည့်ပေးရပါမယ်
  • width - Image အကျယ် ကိုဆိုပါတယ်
  • height - Image အမြင့် ကိုဆိုပါတယ်

Example

<img src ="/Your File path/photo.jpg" >
Try it yourself

How to View HTML Source?

တစ်ခါတလေကျရင် အခြားသူ web page ရဲ့ code တွေကိုကြည့်ချင်တယ်မလား?

HTML Source Code ကိုကြည့်နည်:

Right click ကိုနှိပ်ပြီး "View Page Source" ကိုထပ်နှိပ်ပါ အဲ့အချိန်ကျရင် web page တစ်ခုလုံးရဲ့ code တွေကို တွေ့မြင်ရမှာဖြစ်ပါတယ်

HTML Element ကိုကြည့်နည်:

Right click ကိုနှိပ်ပြီ: "Inspect" သို့မဟုတ် "Inspect Element" အဲ့အချိန်ကျရင် element တစ်ခုအသေးစိတ် (HTML, CSS)ကို ဘာနဲ့လုပ်ထားလဲဆိုတာကို တွေ့မြင်ရမှာဖြစ်ပါတယ်

အဲ့ Element ကို ကျနော်တို့ edit လို့ရပါတယ် ဒါပေမယ့် web page refersh လုပ်လိုက်တဲ့အချိန် element တွေ နဂိုမူလအတိုင်းပြန်ဖြစ်သွားပါလိမ့်မယ်

Element Edit ကျနော်တို့ အစမ်း လုပ်တဲ့အချိန်မှာသုံးပါတယ်

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)