အားလုံးကိုပေါင်းစပ်တည်ဆောက်ကြည့်ကြစို့

ဒီသင်ခန်းစာကတော့ အရင်သင်ခဲ့သမျှ အားလုံးကိုပေါင်းစပ်ပြီး HTML webpage အပြည့်အစုံတစ်ခု တည်ဆောက်တဲ့အကြောင်းပဲ ဖြစ်ပါတယ်။ Heading တွေ၊ စာသားတွေ၊ link တွေ၊ ပုံတွေ၊ table တွေ၊ form တွေနဲ့ HTML5 feature တွေကို အတူတကွအသုံးပြုပြီး လက်တွေ့ project တစ်ခုကို ဖန်တီးသွားမှာပါ။ ဒီသင်ခန်းစာအဆုံးမှာတော့ HTML ရဲ့ အစိတ်အပိုင်းတစ်ခုချင်းစီက တကယ့် webpage တစ်ခုမှာ ဘယ်လိုအလုပ်လုပ်တယ်ဆိုတာကို နားလည်သွားမှာပါ။

Webpage တစ်ခုရဲ့ တည်ဆောက်ပုံ

HTML page တိုင်းမှာ အခြေခံကျတဲ့ တည်ဆောက်ပုံတစ်ခု လိုအပ်ပါတယ်။

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>
    <body>

    </body>
</html>

<!DOCTYPE html>: Browser ကို ဒါက HTML5 page တစ်ခုဖြစ်ကြောင်း ပြောပြပါတယ်။
<html>: အဓိက root element ဖြစ်ပါတယ်။
<head>: Meta အချက်အလက်တွေ၊ page title တွေနဲ့ stylesheet link တွေကို ထည့်သွင်းပါတယ်။
<body>: User တွေ မြင်တွေ့ရမယ့် အရာအားလုံးကို ထည့်သွင်းပါတယ်။

Navigation bar က user တွေကို webpage ထဲမှာ အလွယ်တကူ သွားလာနိုင်အောင် ကူညီပေးပါတယ်။ <nav> element ထဲမှာ link တွေကို အခုလို ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

<nav>
  <a href="#home">Home</a> |
  <a href="#about">About</a> |
  <a href="#contact">Contact</a>
</nav>

စာမျက်နှာတစ်ခုတည်းမှာ scroll လုပ်ပြီး သွားလာဖို့အတွက် #section-id နဲ့ internal link တွေကို သုံးနိုင်ပါတယ်။

Hero Section

Hero section ဆိုတာက visitor တွေ ပထမဆုံးမြင်ရတဲ့ အပိုင်းဖြစ်ပါတယ်။ များသောအားဖြင့် အောက်ပါအရာတွေ ပါဝင်လေ့ရှိပါတယ်:

ခေါင်းစဉ်ကြီး (<h1> or <h2>)
ပုံ (<img>)
Call-to-action ခလုတ် (<a> or <button>)

<section id="home">
  <h1>Welcome to My Webpage</h1>
    <img
        src="https://placehold.co/600x400"
        alt="Hero Image"
        width="600"
      />
  <a href="#about">Learn More</a>
</section>

About Section (အကြောင်းအရာ)

ဒီအပိုင်းကတော့ သင့်အကြောင်း ဒါမှမဟုတ် သင့်ရဲ့ content အကြောင်းကို မိတ်ဆက်ပေးတဲ့နေရာပါ။ စာပိုဒ်တွေ၊ ပုံတွေနဲ့ ခေါင်းစဉ်တွေကို အသုံးပြုနိုင်ပါတယ်။

<section id="about">
  <h2>About Me</h2>
  <p>Hello! I am learning HTML and building my first webpage.</p>
     <img
        src="https://placehold.co/400x300"
        alt="About Image"
        width="400"
      />
</section>

Table Section (ဇယား)

Table (ဇယား) တွေက အချက်အလက်တွေကို စနစ်တကျ ဖော်ပြဖို့အတွက် အသုံးဝင်ပါတယ်။

<section>
  <h2>My Skills</h2>
  <table border="1">
    <caption>Skills and Levels</caption>
    <tr>
      <th>Skill</th>
      <th>Level</th>
    </tr>
    <tr>
      <td>HTML</td>
      <td>Intermediate</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Beginner</td>
    </tr>
  </table>
</section>

ဇယားခေါင်းစဉ်အတွက် <caption> ခေါင်းစဉ် column အတွက် <th> row အတွက် <tr> နဲ့ data cell အတွက် <td> ကို သုံးပါတယ်။

Contact Form (ဆက်သွယ်ရန်)

Form တွေကို သုံးပြီး user တွေက အချက်အလက်တွေ ပေးပို့နိုင်ပါတယ်။ အောက်ပါတို့ကို ထည့်သွင်းသင့်ပါတယ်:

Text input field များ
Email input field
Submit ခလုတ်

<section id="contact">
  <h2>Contact Me</h2>
  <form action="submit.html" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <button type="submit">Send</button>
  </form>
</section>

Footer ကတော့ စာမျက်နှာရဲ့ အောက်ဆုံးမှာရှိပြီး များသောအားဖြင့် link တွေ၊ မူပိုင်ခွင့်အချက်အလက်တွေ ပါဝင်ပါတယ်။

<footer>
  <p>&copy; 2025 My Webpage. All rights reserved.</p>
  <a href="#home">Back to top</a>
</footer>

Multimedia ထည့်သွင်းခြင်း (Optional)

သင်ဆန္ဒရှိရင် HTML5 ကိုသုံးပြီး audio, video, ဒါမှမဟုတ် animation တွေကို ထည့်သွင်းနိုင်ပါတယ်။

<video width="320" controls>
  <source src="intro.mp4" type="video/mp4">
</video>

အကုန်လုံးကို ပေါင်းစပ်လိုက်တဲ့ အခါ -

css ကို ထည့်သွင်းပြီး ဒီ structure ကို ပိုပြီး လှပအောင် ပြင်ဆင်နိုင်ပါတယ်။

Webpage တစ်ခုဟာ ခေါင်းစဉ်၊ စာသား၊ link၊ ပုံ၊ ဇယား၊ form နဲ့ media တွေကို ပေါင်းစပ်ဖွဲ့စည်းထားတာ ဖြစ်တယ်။
Navigation bar က user experience ကို ပိုကောင်းစေပြီး page structure ကိုလည်း စနစ်တကျဖြစ်စေတယ်။
Hero နဲ့ About section တွေက page ကို ဆွဲဆောင်မှုရှိစေတယ်။
Table တွေက အချက်အလက်တွေကို စနစ်တကျနဲ့ ဖတ်ရလွယ်အောင် စုစည်းပေးတယ်။
Form တွေက user တွေကို data တွေ ဒါမှမဟုတ် message တွေ ပေးပို့နိုင်အောင် လုပ်ဆောင်ပေးတယ်။
Footer က စာမျက်နှာရဲ့ အောက်ခြေမှာ တသမတ်တည်းရှိတဲ့ အချက်အလက်တွေကို ဖော်ပြပေးတယ်။
HTML element တွေအားလုံးကို အတူတကွအသုံးပြုခြင်းအားဖြင့် webpage အပြည့်အစုံတစ်ခုကို ဖန်တီးနိုင်ပါတယ်။