HTML Basic
- Jun 24, 2021
- 1 min read
Updated: Mar 23, 2022
HTML ရဲ့ အရှည်ကတောဘ Hypertext Markup Language ဖြစ်ပြီးတော့ ၁၉၈၉ မှာ Tim Berners-Lee ကတီထွင်ခဲ့တာပါ။ HTML ဆိုတာက Web site ရဲ့ သွင်ပြင်လက္ခဏာကို user ကိုပြသတဲ့နေရာမှာအသုံးပြုတာပါ။ HTML မရှိဘူးဆိုရင်တော့ ကိုယ်ဖော်ပြချင်တဲ့အကြောင်းအရာကို Web site ကပြပေးနိုင်မှာမဟုတ်ပါဘူး။ အတိုချုပ်ဆိုရလျှင် HTML code သည်စာသား၊ ရုပ်ပုံတွေ အခြားမီဒီယာများကို ကို မိမိစိတ်ကြိုက် Web site ပေါ်တွင် တင်ပြသည့်နေရာမှာအသုံးပြုပါတယ်။
HTML သည်တစ်ခုတည်းနဲ့ functional ဝက်ဘ်စာမျက်နှာတစ်ခုကို develop လုပ်မယ်ဆိုရင်တော့ မိမိစိတ်တိုင်းကျ UI design တွေကို develop လုပ်လို့မရနိုင်ပါဘူး။ အခြား programming language တွေဖြစ်တဲ့ CSS (Cascading Style Sheets) နှင့် JavaScript တို့ပေါင်းစပ်မှသာ functional ဝက်ဘ်စာမျက်နှာတစ်ခုကိုစိတ်တိုင်းကျ develop ပြုလုပ်နိုင်မှာဖြစ်ပါတယ်။
HTML = Web site Structure
CSS = Style
JavaScript = functionality
Basic Html Components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>HTML element တစ်ခုမှာဘာတွေပါလည်းဆိုတော့
Opening tag
Closing tag
Content
Element
Attribute ဆိုပြီးပါဝင်ပါတယ်။
<p>Hello</p>Opening tag နဲ့ Closing tag ကွာခြားချက်ကတော့ Closing tag မှာ / ပါပါတယ်။
Closing tag မလိုတဲ့ HTML tag တွေလည်းရှိပါတယ်။ ဥပမာအနေနဲ့ကတော့ <br>, <hr>
Content ဆိုတာကတော့ Opening tag နဲ့ Closing tag ကြားထဲ က စာသားကိုခေါ်ပါတယ်။
Element ဆိုတာကတော့ Opening tag + Closing tag + Content တစ်ခုလုံးကိုခေါ်တာပါ။
Attribute ဆိုတာကတော့ ( optional ) အနေနဲ့ ကိုယ်ထည့်လိုတဲ့အခါ ထည့်လို့ရပါတယ်။
<p class="paragraph">Hello </p>HTML Attributes အကြောင်းကို ဆက်ရှင်းပြပါမယ်။
class="paragraph" က Attribute ဖြစ်ပါတယ်။
Class ဆိုတာ attribute name ဖြစ်ပြီး paragraph ကတော့ attribute value ဖြစ်ပါတယ်။
Class Attribute က non-unique identifier ဖြစ်ပါတယ်။
Attributes ကိုရေးမယ်ဆိုရင် လိုက်နာသင့်တဲ့အချက်တွေကတော့
tab တစ်ခုမှာ attribute တစ်ခုထက်ပိုပြီးရေးတဲ့အခါ space ခြားရပါမယ်
attribute name ရဲ့ နောက်မှာ = Sign ပါရပါမယ်
မျက်တောင်အဖွင့်အပိတ် ကြားထဲမှာ attribute ကိုရေးရပါမယ်။
Nesting elements အကြောင်းကို ဆက်ရှင်းပြပါမယ်။
Element တစ်ခုထဲမှာ တစ်ခြား elements ကိုထည့်ရေးတာကို Nesting elements လို့ခေါ်ပါတယ်။
ဥပမာအနေနဲ့
<p>My cat is <strong>very</strong> grumpy.</p><p> tag အဖွင့်က အရင်လာတယ် ပြီးတော့ <strong> tag ကိုထည့်ထားပါတယ်။
Nesting elements တွေမှာ အတွင်းဘက်အကျဆုံး tag အဖွင့်ကို အရင် closing tag ရေးပေးရပါမယ်။ အဲ့ဒါကြောင့် </strong> tag အပိတ်ရေးပြီး နောက်ဆုံးမှာ </p> tag အပိတ်ရေ ရပါမယ်။
Empty elements အကြောင်းကို ဆက်ရှင်းပြပါမယ်။
တစ်ချို့သော element တွေက content ထည့်စရာမလိုတာကို empty element လို့ခေါ်တာပါ။
<img src="images/firefox-icon.png" alt="My test image">attribute တွေနှစ်ခုပါ၀င်ပေမယ့် ပိတ်ထားတဲ့ </img> tag လည်းမပါသလို အတွင်းမှာ content လည်း မပါပါဘူး။
အခုရှင်းပြသွားပေးခဲ့တာတွေကတော့ HTML ရဲ့ အခြေခံသဘောတရားတွေဘဲဖြစ်ပါတယ်။
Comments