Myanmar Coder Guide

Course Outline from w3school.com

Sunday, November 29, 2020

HTML Introduction

HTML Introduction

  • HTML (HyperText Markup Language) ဆိုတာက Web pages တွေ တည်ဆောက်တဲ့ အခါ လိုက်နာရန်အတွက် W3C က သတ်မှတ်ထားတဲ့ standard ဖြစ်ပါတယ်။

HTML ဆိုတာ ဘာလဲ?

  • HTML က Web page တစ်ခုရဲ့ တည်ဆောက်ပုံကို ဖော်ပြပါတယ်။
  • HTML ၌ element တွေ အတွဲလိုက် ပါ၀င်ပါတယ်။
  • HTML element တွေက browser ကို ဘယ်လို ပုံစံ ဖော်ပြမယ်ဆိုတာကို ပြောပါတယ်။
  • ဒီ element တွေက content('this is heading', 'this is paragraph', etc...) အပိုင်းအစ တွေကို ပြန်ခွဲပါတယ်။

A Simple HTML Document

ပြည်စုံတဲ့ HTML document တစ်ခုက အနည်းဆုံးတော့ အောက်ပါအတိုင်း ပါ၀င် ပါတယ်။

Example

This is a Heading

This is a paragraph.

Try it yourself

Example Explained

  • <!DOCTYPE html> ဆိုတာ ဒီ document ဟာ HTML document ဖြစ်ကြောင်း ကြေငြာခြင်း ဖြစ်ပါတယ်။
  • <html> က HTML page တစ်ခုရဲ့ အဓိက element တစ်ခု ဖြစ်ပါတယ်။
  • <head> က HTML page နဲ့ ဆိုင်သော meta infomation တွေ ကြေငြာဖို့ အတွက် ဖြစ်ပါတယ်။ အများအားဖြင့် < title > element က အမြဲပါ ပါတယ်။
  • <title> က HTML page ရဲ့ ခေါင်းစဥ်ကို ဖော်ပြပါတယ်။ (သူက browser ရဲ့ title bar (သို့မဟုတ်) page ရဲ့ tab ၌ ဖော်ပြပါတယ်)
  • <body> ကတော့ browser ၌ မြင်ရမယ့် content("headings","paragraphs"," images"," hyperlinks","tables"," lists", etc...) တွေကို ဖော်ပြပါတယ်။
  • <h1> က အကြီးဆုံး ခေါင်းစဥ် ဖြစ်ပါတယ်။
  • <p> ကတော့ စာပိုဒ်တွေ အတွက် ဖြစ်ပါတယ်။

HTML Element တစ်ခုက ဘာလဲ ?

tag အဖွင့် ၊ အကြောင်းအရာ ၊ tag အပိတ် ဆိုပြီး HTML element ကိုဖော်ပြပါတယ်။
< tagname > Content goes here...< /tagname >

tagအဖွင့် ကနေ စပြီး tagအပိတ် အထိက HTML element တွေဖြစ်ပါတယ်။ < h1 > My First Heading </h1 > < p > My first paragraph.< /p >

tag အဖွင့် အကြောင်းအရာ tag အပိတ်
< h1 > My First Heading < /h1 >
< p > My first paragraph < /p >
< br > none none

အချို့ HTML element တွေက အကြောင်းအရာတွေ မပါကြဘူး။(Like br element) အဲ့ဒီ element တွေကို Empty element တွေဖြစ်ပါတယ်။ သူတို့က tagအပိတ် လည်း မပါကြပါဘူး။

Web Browser

Web browser (Chrome, Edge, Firefox, Safari) တွေရဲ့ ရည်ရွယ်ချက်ကတော့ HTML document တွေကို ဖတ်ပြီး မှန်ကန်စွာ ဖော်ပြပေးခြင်း ဖြစ်ပါတယ်။

HTML tag တွေကိုတော့ browserက မဖော်ပြပါဘူး။ ဒါပေမယ် HTML element တွေကို သုံးပြီး document တွေကို ဘယ်လို ဖော်ပြမယ်ဆိုကို ဆုံးဖြတ်ပါတယ်။

HTML Page တည်ဆောက်ပုံ

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
< body > section အတွင်းက အကြောင်းအရာသာ browser ထဲ၌ ဖော်ပြလိမ့်မယ်။

HTML History

World Wide Web ရဲ့ အစောပိုင်းကာလ တွေကတည်း HTML version အမျိုးမျိူး ပေါာခဲ့တယ်။

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2018 W3C Recommendation: HTML5.2

ဒီ tutorial က နောက်ဆုံး version HTML 5 standard နဲ့ ဖော်ပြထားပါတယ်။

No comments:

Post a Comment