# Terrarium Project Part 1: HTML ကိုမိတ်ဆက်ခြင်း ```mermaid journey title Your HTML Learning Journey section Foundation Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Content Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantics Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![HTML ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.my.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) HTML, သို့မဟုတ် HyperText Markup Language ဟာ သင်သွားရောက်ခဲ့တဲ့ website တစ်ခုချင်းစီရဲ့ အခြေခံအဆောက်အအုံပဲဖြစ်ပါတယ်။ HTML ကို website ရဲ့ အရိုးတစ်ခုလိုပဲ စဉ်းစားနိုင်ပါတယ် – content ကိုဘယ်မှာထားမလဲ၊ ဘယ်လိုစီမံမလဲ၊ အစိတ်အပိုင်းတစ်ခုချင်းစီက ဘာကိုကိုယ်စားပြုလဲဆိုတာကို သတ်မှတ်ပေးပါတယ်။ CSS က HTML ကို အရောင်နဲ့ layout တွေဖြင့် "အဝတ်အစား" ဝတ်ပေးမှာဖြစ်ပြီး၊ JavaScript ကတော့ interactivity ဖြင့် "အသက်" ပေးမှာဖြစ်ပါတယ်။ HTML က အခြေခံအဆောက်အအုံကိုပေးပြီး အခြားအရာတွေကိုဖြစ်နိုင်စေပါတယ်။ ဒီသင်ခန်းစာမှာ သင် virtual terrarium interface အတွက် HTML အဆောက်အအုံကို ဖန်တီးပါမယ်။ ဒီလက်တွေ့လုပ်ငန်းက သင်ကို HTML အခြေခံအယူအဆတွေကို သင်ပေးမှာဖြစ်ပြီး၊ visually engaging ဖြစ်တဲ့အရာတစ်ခုကို ဖန်တီးမှာဖြစ်ပါတယ်။ သင် semantic elements တွေကိုသုံးပြီး content ကိုစီမံပုံ၊ images တွေနဲ့အလုပ်လုပ်ပုံ၊ interactive web application အတွက် အခြေခံအဆောက်အအုံကိုဖန်တီးပုံကို သင်ယူပါမယ်။ ဒီသင်ခန်းစာအဆုံးမှာ သင် plant images တွေကို စီမံထားတဲ့ column တွေထဲမှာ ပြသထားတဲ့ HTML page တစ်ခုကို ရရှိမှာဖြစ်ပြီး၊ CSS သင်ခန်းစာမှာ style ပေးဖို့အဆင်သင့်ဖြစ်ပါမယ်။ အစမှာ basic ဖြစ်နေတယ်လို့မပူပါနဲ့ – CSS က visual polish ပေးမယ့်အခါ HTML က အခြေခံအဆောက်အအုံပေးဖို့အတွက် ဒီလို basic ဖြစ်ရတာပဲ။ ```mermaid mindmap root((HTML Fundamentals)) Structure DOCTYPE Declaration HTML Element Head Section Body Content Elements Tags & Attributes Self-closing Tags Nested Elements Block vs Inline Content Text Elements Images Containers (div) Lists Semantics Meaningful Tags Accessibility Screen Readers SEO Benefits Best Practices Proper Nesting Valid Markup Descriptive Alt Text Organized Structure ``` ## သင်ခန်းစာမတိုင်မီ Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **ကြည့်ပြီးလေ့လာပါ**: ဒီအသုံးဝင်တဲ့ video overview ကိုကြည့်ပါ > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Project ကိုစတင်တည်ဆောက်ခြင်း HTML code ကိုစတင်မလုပ်ခင်မှာ သင့် terrarium project အတွက် workspace ကိုတည်ဆောက်ပါ။ စတင်ချိန်မှာ file structure ကိုစီမံထားခြင်းက သင့် web development ခရီးလမ်းတလျှောက် အရေးကြီးတဲ့အကျင့်တစ်ခုဖြစ်ပါတယ်။ ### Task: Project Structure ကိုဖန်တီးပါ သင့် terrarium project အတွက် folder တစ်ခုဖန်တီးပြီး သင့်ရဲ့ပထမ HTML file ကိုထည့်ပါ။ သင်အသုံးပြုနိုင်တဲ့နည်းလမ်းနှစ်ခုရှိပါတယ်။ **Option 1: Visual Studio Code ကိုအသုံးပြုခြင်း** 1. Visual Studio Code ကိုဖွင့်ပါ 2. "File" → "Open Folder" ကို click လုပ်ပါ၊ သို့မဟုတ် `Ctrl+K, Ctrl+O` (Windows/Linux) သို့မဟုတ် `Cmd+K, Cmd+O` (Mac) ကိုအသုံးပြုပါ 3. `terrarium` လို့ခေါ်တဲ့ folder တစ်ခုဖန်တီးပြီး select လုပ်ပါ 4. Explorer pane မှာ "New File" icon ကို click လုပ်ပါ 5. သင့် file ကို `index.html` လို့အမည်ပေးပါ ![VS Code Explorer showing new file creation](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.my.png) **Option 2: Terminal Commands ကိုအသုံးပြုခြင်း** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **ဒီ commands တွေကဘာလုပ်ပေးသလဲဆိုရင်**: - **ဖန်တီး** – `terrarium` လို့ခေါ်တဲ့ directory အသစ်ကို project အတွက်ဖန်တီးပေးခြင်း - **သွားရောက်** – terrarium directory ထဲကိုသွားရောက်ခြင်း - **ဖန်တီး** – `index.html` file ကိုဖန်တီးခြင်း - **ဖွင့်** – Visual Studio Code မှာ file ကို edit လုပ်ဖို့ဖွင့်ခြင်း > 💡 **Pro Tip**: `index.html` ဆိုတဲ့ filename က web development မှာအထူးတလည်ဖြစ်ပါတယ်။ တစ်စုံတစ်ခု website ကိုသွားရောက်တဲ့အခါ browser တွေက `index.html` ကို default page အဖြစ်ပြသဖို့အလိုအလျောက်ရှာဖွေပါတယ်။ ဒါကြောင့် `https://mysite.com/projects/` ဆိုတဲ့ URL က `projects` folder ထဲက `index.html` file ကို filename မသတ်မှတ်ဘဲ အလိုအလျောက်ပြသပေးနိုင်ပါတယ်။ ## HTML Document Structure ကိုနားလည်ခြင်း HTML document တစ်ခုချင်းစီမှာ browser တွေကိုနားလည်ပြီးမှန်ကန်စွာပြသနိုင်ဖို့အတွက် structure တစ်ခုရှိပါတယ်။ ဒီ structure ကို formal letter တစ်စောင်လိုပဲ စဉ်းစားနိုင်ပါတယ် – အထူးသတ်မှတ်ထားတဲ့ elements တွေကို အတိအကျအစီအစဉ်နဲ့ထားရပြီး recipient (browser) က content ကိုမှန်ကန်စွာ process လုပ်နိုင်ဖို့အရေးကြီးပါတယ်။ ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Heading"] G --> I["<div> Containers"] G --> J["<img> Images"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` အခု HTML document တစ်ခုရဲ့ အခြေခံအဆောက်အအုံကိုစတင်ထည့်ပါမယ်။ ### DOCTYPE Declaration နဲ့ Root Element HTML file ရဲ့ပထမဆုံးလိုင်းနှစ်ခုက browser အတွက် document ရဲ့ "မိတ်ဆက်" အဖြစ်လုပ်ဆောင်ပါတယ်။ ```html <!DOCTYPE html> <html></html> ``` **ဒီ code ကဘာလုပ်ပေးသလဲဆိုရင်**: - **Document type ကို HTML5 အဖြစ်သတ်မှတ်** – `<!DOCTYPE html>` ကိုအသုံးပြုခြင်း - **Root `<html>` element ကိုဖန်တီး** – page content အားလုံးကိုထည့်သွင်းဖို့ - **Modern web standards ကိုသတ်မှတ်** – browser rendering မှန်ကန်စွာလုပ်ဆောင်ဖို့ - **Different browsers နဲ့ devices တွေမှာ display ကိုအတူတူဖြစ်စေ** > 💡 **VS Code Tip**: VS Code မှာ HTML tag တစ်ခုချင်းစီကို hover လုပ်ပါက MDN Web Docs မှာ helpful information တွေ၊ usage examples တွေ၊ browser compatibility details တွေကိုကြည့်နိုင်ပါတယ်။ > 📚 **Learn More**: DOCTYPE declaration က browser တွေကို "quirks mode" ထဲမဝင်စေဖို့ကာကွယ်ပေးပါတယ်။ "quirks mode" က အရမ်းဟောင်းနေတဲ့ website တွေကို support ပေးဖို့အသုံးပြုခဲ့တာပါ။ Modern web development မှာ `<!DOCTYPE html>` declaration ရိုးရှင်းတဲ့အတိုင်းအသုံးပြုပြီး [standards-compliant rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ကိုသေချာစေပါတယ်။ ### 🔄 **Pedagogical Check-in** **Pause and Reflect**: ဆက်လက်လုပ်ဆောင်မီ သင်နားလည်ထားပါစေ: - ✅ HTML document တစ်ခုမှာ DOCTYPE declaration ဘာကြောင့်လိုအပ်သလဲ - ✅ `<html>` root element ကဘာတွေထည့်သွင်းထားလဲ - ✅ ဒီ structure က browser တွေကို page rendering မှန်ကန်စွာလုပ်ဆောင်ဖို့ဘယ်လိုကူညီပေးလဲ **Quick Self-Test**: "standards-compliant rendering" ဆိုတာကို သင့်စကားနဲ့ရှင်းပြနိုင်ပါသလား? ## Essential Document Metadata ထည့်သွင်းခြင်း HTML document ရဲ့ `<head>` section က browser တွေ၊ search engines တွေလိုအရေးကြီးတဲ့အချက်အလက်တွေကိုထည့်သွင်းထားပြီး၊ visitors တွေက page ပေါ်မှာတိုက်ရိုက်မမြင်နိုင်ပါဘူး။ ဒါဟာ webpage ကိုမှန်ကန်စွာအလုပ်လုပ်စေဖို့၊ devices နဲ့ platforms အမျိုးမျိုးမှာမှန်ကန်စွာပေါ်စေဖို့ "နောက်ကွယ်က" အချက်အလက်တွေကိုပေးစွမ်းပါတယ်။ ဒီ metadata က browser တွေကို page ကိုဘယ်လိုပြသမလဲ၊ ဘယ် character encoding ကိုအသုံးပြုမလဲ၊ ဘယ် screen size တွေကို handle လုပ်မလဲဆိုတာကိုပြောပြပေးပါတယ် – professional, accessible web pages ဖန်တီးဖို့အရေးကြီးပါတယ်။ ### Task: Document Head ကိုထည့်ပါ သင့် `<html>` tag တွေရဲ့ opening နဲ့ closing tag တွေကြားမှာ `<head>` section ကိုထည့်ပါ: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Element တစ်ခုချင်းစီကဘာလုပ်ပေးသလဲဆိုရင်**: - **Page title ကိုသတ်မှတ်** – browser tabs နဲ့ search results မှာပေါ်စေဖို့ - **UTF-8 character encoding ကိုသတ်မှတ်** – text display ကိုကမ္ဘာတစ်ဝှမ်းမှာမှန်ကန်စေဖို့ - **Modern Internet Explorer versions နဲ့အတူတူအလုပ်လုပ်စေဖို့** – compatibility သေချာစေခြင်း - **Responsive design ကို configure** – viewport ကို device width နဲ့ကိုက်ညီစေဖို့ - **Initial zoom level ကို control** – content ကို natural size နဲ့ပြသဖို့ > 🤔 **Think About This**: `` ဆိုတဲ့ viewport meta tag ကိုသတ်မှတ်လိုက်ရင် ဘာဖြစ်မလဲ? ဒီ tag က page ကိုအမြဲ 600 pixels wide ဖြစ်စေပြီး responsive design ကိုဖျက်စီးသွားမှာပါ! [Proper viewport configuration](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) အကြောင်းပိုမိုလေ့လာပါ။ ## Document Body ကိုတည်ဆောက်ခြင်း HTML document ရဲ့ `` element က webpage ရဲ့မြင်နိုင်တဲ့ content အားလုံးကိုထည့်သွင်းထားပါတယ် – users တွေမြင်နိုင်ပြီး interact လုပ်နိုင်တဲ့အရာအားလုံးပါဝင်ပါတယ်။ `` section က browser ကိုညွှန်ကြားချက်တွေကိုပေးထားပြီး၊ `` section ကတော့ actual content – text, images, buttons, နဲ့ user interface ဖန်တီးတဲ့အခြား elements တွေကိုထည့်သွင်းထားပါတယ်။ Body structure ကိုထည့်ပြီး HTML tags တွေဘယ်လိုပေါင်းစပ်ပြီး အဓိပ္ပါယ်ရှိတဲ့ content ကိုဖန်တီးပေးနိုင်တယ်ဆိုတာကိုနားလည်ပါ။ ### HTML Tag Structure ကိုနားလည်ခြင်း HTML က paired tags တွေကိုအသုံးပြုပြီး elements တွေကိုသတ်မှတ်ပါတယ်။ အများစု tag တွေမှာ `

` လို opening tag နဲ့ `

` လို closing tag ရှိပြီး content ကိုအကြားမှာထည့်ထားပါတယ် – `

Hello, world!

` ဆိုတာက "Hello, world!" ဆိုတဲ့ text ပါဝင်တဲ့ paragraph element ကိုဖန်တီးပေးပါတယ်။ ### Task: Body Element ကိုထည့်ပါ သင့် HTML file ကို update လုပ်ပြီး `` element ကိုထည့်ပါ: ```html Welcome to my Virtual Terrarium ``` **ဒီ complete structure ကဘာပေးသလဲဆိုရင်**: - **HTML5 document framework ကိုတည်ဆောက်** – အခြေခံအဆောက်အအုံ - **Browser rendering မှန်ကန်စွာလုပ်ဆောင်ဖို့ metadata ထည့်သွင်း** – အရေးကြီး - **မြင်နိုင်တဲ့ content အတွက် empty body ဖန်တီး** – user interface အတွက် - **Modern web development best practices ကိုလိုက်နာ** – အဆင့်မြှင့် အခုတော့ သင့် terrarium ရဲ့မြင်နိုင်တဲ့ elements တွေကိုထည့်ဖို့အဆင်သင့်ဖြစ်ပါပြီ။ `
` elements တွေကို containers အဖြစ်အသုံးပြုပြီး၊ `` elements တွေကို plant images တွေပြသဖို့အသုံးပြုပါမယ်။ ### Images နဲ့ Layout Containers ကိုအသုံးပြုခြင်း HTML မှာ images တွေဟာ "self-closing" tags တွေဖြစ်ပါတယ်။ `

` လို content ကို wrap လုပ်တဲ့ elements တွေမဟုတ်ဘဲ၊ `` tag ကတော့ `src` (image file path) နဲ့ `alt` (accessibility) attributes တွေကိုအသုံးပြုပြီး tag ထဲမှာလိုအပ်တဲ့အချက်အလက်အားလုံးကိုထည့်ထားပါတယ်။ Images တွေကို HTML မှာထည့်မယ့်အခါ project files တွေကိုမှန်ကန်စွာစီမံထားဖို့အရေးကြီးပါတယ်။ images folder တစ်ခုဖန်တီးပြီး plant graphics တွေထည့်ပါ။ **အရင်ဆုံး images တွေကိုစီမံပါ**: 1. Terrarium project folder ထဲမှာ `images` folder တစ်ခုဖန်တီးပါ 2. [solution folder](../../../../3-terrarium/solution/images) မှာရှိတဲ့ plant images တွေကို download လုပ်ပါ (14 plant images) 3. Plant images အားလုံးကို သင့်ရဲ့ `images` folder ထဲကို copy လုပ်ပါ ### Task: Plant Display Layout ကိုဖန်တီးပါ အခုတော့ plant images တွေကို `` tags တွေကြားမှာ two columns အဖြစ်စီမံပါ: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Step by step, ဒီ code ကဘာလုပ်ပေးသလဲဆိုရင်**: - **Main page container ကိုဖန်တီး** – `id="page"` နဲ့ content အားလုံးကိုထည့်သွင်း - **Two column containers ကိုဖန်တီး** – `left-container` နဲ့ `right-container` - **Left column မှာ plants 7 ခု၊ Right column မှာ plants 7 ခုကိုစီမံ** – organized - **Each plant image ကို `plant-holder` div ထဲမှာ wrap လုပ်** – positioning - **Consistent class names ကို CSS styling အတွက်အသုံးပြု** – next lesson - **Each plant image ကို unique ID assign လုပ်** – JavaScript interaction အတွက် - **File paths ကို images folder ကိုညွှန်** – proper > 🤔 **Consider This**: အခု images တွေမှာ alt text "plant" တူညီတဲ့အတိုင်းရှိပါတယ်။ Accessibility အတွက် ဒီဟာကအကောင်းဆုံးမဟုတ်ပါဘူး။ Screen reader users တွေက "plant" ဆိုတာ 14 ကြိမ်ထပ်ခါတလဲလဲကြားရပြီး၊ image တစ်ခုချင်းစီက ဘယ် plant ဖြစ်တယ်ဆိုတာမသိနိုင်ပါဘူး။ Image တစ်ခုချင်းစီအတွက် ပိုမိုဖော်ပြနိုင်တဲ့ alt text တွေကိုစဉ်းစားနိုင်ပါသလား? > 📝 **HTML Element Types**: `
` elements တွေက "block-level" ဖြစ်ပြီး full width ကိုယူပါတယ်၊ `` elements တွေက "inline" ဖြစ်ပြီးလိုအပ်တဲ့ width ကိုပဲယူပါတယ်။ ဒီ `
` tags တွေကို `` tags တွေပြောင်းလိုက်ရင် ဘာဖြစ်မလဲဆိုတာစဉ်းစားနိုင်ပါသလား? ### 🔄 **Pedagogical Check-in** **Structure Understanding**: သင့် HTML structure ကိုပြန်လည်သုံးသပ်ပါ: - ✅ Layout ရဲ့ main containers တွေကိုသင်သိနိုင်ပါသလား? - ✅ Image တစ်ခုချင်းစီမှာ unique ID ဘာကြောင့်လိုအပ်သလဲဆိုတာနားလည်ပါသလား? - ✅ `plant-holder` div တွေရဲ့ရည်ရွယ်ချက်ကိုဘယ်လိုဖော်ပြနိုင်မလဲ? **Visual Inspection**: သင့် HTML file ကို browser မှာဖွင့်ပါ။ သင်မြင်ရမယ့်အရာတွေက: - Plant images ရဲ့ basic list - Images တွေကို two columns အဖြစ်စီမံထား - Simple, unstyled layout **Remember**: CSS styling မလုပ်ခင် HTML ရဲ့ plain appearance ကအတိအကျဒီလိုပဲဖြစ်ရမယ်! ဒီ markup ကိုထည့်ပြီးနောက်မှာ plants တွေ screen ပေါ်မှာပေါ်လာပါမယ်၊ ဒါပေမယ့် polished မဖြစ်သေးပါဘူး – CSS သင်ခန်းစာမှာ style ပေးမှာပါ! အခုတော့ သင့် content ကိုမှန်ကန်စွာစီမံထားပြီး accessibility best practices ကိုလိုက်နာတဲ့ HTML foundation ရရှိပါပြီ။ ## Accessibility အတွက် Semantic HTML ကိုအသုံးပြုခြင်း Semantic HTML ဆိုတာ element တွေကို သူ့ရဲ့အဓိပ္ပါယ်နဲ့ရည်ရွယ်ချက်အပေါ်မူတည်ပြီးရွေးချယ်တာဖြစ်ပါတယ်၊ appearance အပေါ်မူတည်တာမဟုတ်ပါဘူး။ Semantic markup ကိုအသုံးပြုတဲ့အခါ သင့် content ရဲ့ structure နဲ့အဓိပ္ပါယ်ကို browser, search engines, နဲ့ screen readers လို assistive technologies တွေကို communicate လုပ်ပေးပါတယ်။ ```mermaid flowchart TD A[Need to add content?] --> B{What type?} B -->|Main heading| C["

"] B -->|Subheading| D["

,

, etc."] B -->|Paragraph| E["

"] B -->|List| F["

    ,
      "] B -->|Navigation| G["