HTML - Head Element
HTML <head>
အစိတ်အပိုင်းသည် အောက်ပါဒြပ်စင်များအတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်-
<title>
, <style>
,
<meta>
, <link>
, <script>
, နှင့် <base>
.
HTML <head> Element
ဒြပ်စင်သည် မက် <head>
တာဒေတာ (ဒေတာအကြောင်း ဒေတာ) အတွက် ကွန်တိန်နာတစ်ခုဖြစ်ပြီး <html>
တဂ်နှင့် တဂ် ကြားတွင် ထားရှိထားသည် <body>
။
HTML မက်တာဒေတာသည် HTML စာရွက်စာတမ်းနှင့်ပတ်သက်သည့် ဒေတာဖြစ်သည်။ မက်တာဒေတာကို မပြသပါ။
မက်တာဒေတာသည် ပုံမှန်အားဖြင့် စာရွက်စာတမ်းခေါင်းစဉ်၊ ဇာတ်ကောင်အစုံ၊ စတိုင်များ၊ ဇာတ်ညွှန်းများနှင့် အခြားမက်တာအချက်အလက်များကို သတ်မှတ်ပေးသည်။
HTML <title> Element
ဒြပ်စင်သည် စာရွက်စာတမ်း ၏ <title>
ခေါင်းစဉ်ကို သတ်မှတ်သည်။ ခေါင်းစဉ်သည် စာသားသီးသန့်ဖြစ်ရမည် ဖြစ်ပြီး ၎င်းကို ဘရောက်ဆာ၏ ခေါင်းစဉ်ဘားတွင် သို့မဟုတ် စာမျက်နှာ၏ တက်ဘ်တွင် ပြသထားသည်။
HTML စာရွက်စာတမ်းများ တွင် <title>
အစိတ်အပိုင်း လိုအပ်ပါသည်။
စာမျက်နှာခေါင်းစဉ်၏ အကြောင်းအရာများသည် ရှာဖွေရေးအင်ဂျင် ပိုမိုကောင်းမွန်အောင်ပြုလုပ်ခြင်း (SEO) အတွက် အလွန်အရေးကြီးပါသည်။ ရှာဖွေမှုရလဒ်များတွင် စာမျက်နှာများကို စာရင်းပြုစုသည့်အခါ အမှာစာဆုံးဖြတ်ရန် စာမျက်နှာခေါင်းစဉ်ကို ရှာဖွေရေးအင်ဂျင် အယ်ဂိုရီသမ်များက အသုံးပြုသည်။
ဒြပ် စင် <title>
-
- ဘရောက်ဆာတူးလ်ဘားတွင် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည်။
- ၎င်းကို စိတ်ကြိုက်များထဲသို့ ထည့်သောအခါတွင် စာမျက်နှာအတွက် ခေါင်းစဉ်တစ်ခုပေးသည်။
- ရှာဖွေရေးအင်ဂျင်-ရလဒ်များတွင် စာမျက်နှာအတွက် ခေါင်းစဉ်တစ်ခုကို ပြသသည်။
ထို့ကြောင့် ခေါင်းစဉ်ကို အတတ်နိုင်ဆုံး တိကျပြီး အဓိပ္ပါယ်ရှိအောင် ကြိုးစားပါ။
ရိုးရှင်းသော HTML စာရွက်စာတမ်း
ဥပမာ
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <style> Element
<style>
HTML စာမျက်နှာတစ်ခုတည်းအတွက် စတိုင်အချက်အလက်ကို သတ်မှတ်ရန် ဒြပ်စင်ကို အသုံးပြုသည် -
ဥပမာ
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML <link> Element
ဒြပ်စင်သည် လက်ရှိ <link>
စာရွက်စာတမ်းနှင့် ပြင်ပအရင်းအမြစ်တစ်ခုကြား ဆက်စပ်မှုကို သတ်မှတ်သည်။
တဂ် ကို <link>
ပြင်ပစတိုင်စာရွက်များနှင့် လင့်ခ်ချိတ်ရန် အများဆုံးအသုံးပြုသည်-
ဥပမာ
<link rel="stylesheet" href="mystyle.css">
အကြံပြုချက်- CSS အကြောင်းအားလုံးကို လေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Tutorial သို့ ဝင်ရောက်ကြည့်ရှု ပါ။
HTML <meta> Element
အင်္ <meta>
ဂါရပ်အား စာလုံးအစုံ၊ စာမျက်နှာဖော်ပြချက်၊ သော့ချက်စာလုံးများ၊ စာရွက်စာတမ်း၏ရေးသားသူနှင့် မြင်ကွင်းပို့ဆက်တင်များကို သတ်မှတ်ရန် ပုံမှန်အားဖြင့် အသုံးပြုပါသည်။
စာမျက်နှာပေါ်တွင် မက်တာဒေတာကို ပြသမည်မဟုတ်သော်လည်း ဘရောက်ဆာများ (အကြောင်းအရာကိုပြသနည်း သို့မဟုတ် စာမျက်နှာကို ပြန်လည်စတင်ရန်)၊ ရှာဖွေရေးအင်ဂျင်များ (သော့ချက်စကားလုံးများ) နှင့် အခြားဝဘ်ဝန်ဆောင်မှုများမှ အသုံးပြုပါသည်။
ဥပမာများ
အသုံးပြုထားသော ဇာတ်ကောင်အစုံကို သတ်မှတ်ပါ-
<meta charset="UTF-8">
ရှာဖွေရေးအင်ဂျင်များအတွက် အဓိကစကားလုံးများကို သတ်မှတ်ပါ-
<meta name="keywords" content="HTML, CSS, JavaScript">
သင့်ဝဘ်စာမျက်နှာ၏ ဖော်ပြချက်ကို သတ်မှတ်ပါ-
<meta name="description" content="Free Web tutorials">
စာမျက်နှာတစ်ခု၏ရေးသားသူကို သတ်မှတ်ပါ-
<meta name="author" content="John Doe">
မှတ်တမ်းကို စက္ကန့် 30 တိုင်း ပြန်လည်စတင်ပါ-
<meta http-equiv="refresh" content="30">
သင့်ဝဘ်ဆိုဒ်ကို စက်အားလုံးတွင် ကောင်းမွန်စေရန် ရှုထောင့်ကို သတ်မှတ်ခြင်း-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta>
တဂ်များ ဥပမာ
ဥပမာ
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Viewport ကို သတ်မှတ်ခြင်း။
မြင်ကွင်းပို့တ်သည် ဝဘ်စာမျက်နှာတစ်ခု၏ အသုံးပြုသူမြင်နိုင်သော ဧရိယာဖြစ်သည်။ ၎င်းသည် စက်ပစ္စည်းနှင့် ကွဲပြားသည် - ၎င်းသည် ကွန်ပြူတာစခရင်ထက် မိုဘိုင်းလ်ဖုန်းတွင် သေးငယ်မည်ဖြစ်သည်။
<meta>
သင့်ဝဘ်စာမျက်နှာများအားလုံးတွင် အောက်ပါဒြပ်စင်များ ထည့်သွင်းသင့်သည် -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
၎င်းသည် စာမျက်နှာ၏အတိုင်းအတာနှင့် အရွယ်အစားကို ထိန်းချုပ်နည်းကို ဘရောက်ဆာအား လမ်းညွှန်ပေးသည်။
အပိုင်းသည် စက် ၏ width=device-width
စခရင်အကျယ်ကို လိုက်နာရန် စာမျက်နှာ၏ အကျယ်ကို သတ်မှတ်သည် (၎င်းသည် စက်ပေါ် မူတည်၍ ကွဲပြားလိမ့်မည်)။
စာမျက်နှာ initial-scale=1.0
ကို ဘရောက်ဆာမှ ပထမဆုံး တင်သောအခါ အပိုင်းသည် ကနဦးချုံ့ချဲ့မှုအဆင့်ကို သတ်မှတ်ပေးသည်။
ဤသည်မှာ viewport မက်တာတက်ဂ် မပါဘဲ ဝဘ်စာမျက်နှာတစ်ခု၏ ဥပမာတစ်ခု နှင့် viewport မက်တာတက်ဂ်ပါသည့် ဝဘ်စာမျက်နှာ၏ တူညီ သည်-
အကြံပြုချက်- သင်သည် ဤစာမျက်နှာကို ဖုန်း သို့မဟုတ် တက်ဘလက်တစ်ခုဖြင့် ကြည့်ရှုနေပါက၊ ခြားနားချက်ကို ကြည့်ရန် အောက်ပါလင့်နှစ်ခုကို နှိပ်နိုင်ပါသည်။
HTML <script> Element
အဆိုပါ <script>
ဒြပ်စင်အား client-side JavaScripts ကိုသတ်မှတ်ရန်အသုံးပြုသည်။
အောက်ပါ JavaScript သည် "Hello JavaScript!" id="demo" ဖြင့် HTML အစိတ်အပိုင်းတစ်ခုသို့
ဥပမာ
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
အကြံပြုချက်- JavaScript အကြောင်းအားလုံးကို လေ့လာရန်၊ ကျွန်ုပ်တို့၏ JavaScript ကျူတိုရီရယ် သို့ ဝင်ရောက်ကြည့်ရှု ပါ။
HTML <base> Element
ဒြပ်စင် သည် <base>
စာမျက်နှာတစ်ခုရှိ ဆက်စပ် URL များအားလုံးအတွက် အခြေခံ URL နှင့်/သို့မဟုတ် ပစ်မှတ်ကို သတ်မှတ်သည်။
တဂ် တွင် <base>
href သို့မဟုတ် ပစ်မှတ် attribute တစ်ခု သို့မဟုတ် နှစ်ခုလုံးရှိရမည်။
<base>
စာရွက်စာတမ်း တစ်ခုတွင် အစိတ်အပိုင်းတစ်ခုသာရှိနိုင်သည် ။
ဥပမာ
စာမျက်နှာတစ်ခုပေါ်ရှိ လင့်ခ်များအားလုံးအတွက် မူရင်း URL နှင့် မူရင်းပစ်မှတ်ကို သတ်မှတ်ပါ-
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
အခန်းအကျဉ်းချုပ်
- ဒြပ်စင်သည် မက်
<head>
တာဒေတာအတွက် ကွန်တိန်နာ (ဒေတာအကြောင်း ဒေတာ) - ဒြပ်စင်ကို tag နှင့် tag ကြားတွင်
<head>
နေရာချထားသည် ။<html>
<body>
<title>
အစိတ်အပိုင်း လိုအပ်ပြီး ၎င်းသည် စာရွက်စာတမ်း၏ ခေါင်းစဉ်ကို သတ်မှတ်သည် ။<style>
စာရွက်စာတမ်းတစ်ခုတည်းအတွက် စတိုင်အချက်အလက်ကို သတ်မှတ်ရန် ဒြပ်စင်ကို အသုံးပြုသည် ။<link>
တဂ်ကို ပြင်ပစတိုင်စာရွက်များထံ လင့်ခ်ချိတ်ရန် အများဆုံးအသုံးပြုသည် ။<meta>
အက္ခရာအစုံ၊ စာမျက်နှာဖော်ပြချက်၊ သော့ချက်စာလုံးများ၊ စာရွက်စာတမ်း၏ရေးသားသူနှင့် မြင်ကွင်းပို့ဆက်တင်များကို သတ်မှတ်ရန် ပုံမှန်အားဖြင့် အသုံးပြုသည့်အ ရာ- အဆိုပါ
<script>
ဒြပ်စင်အား client-side JavaScripts များကိုသတ်မှတ်ရန်အသုံးပြုသည်။ <base>
ဒြပ်စင်သည် စာမျက်နှာတစ်ခုရှိ ဆက်စပ် URL များအားလုံးအတွက် အခြေခံ URL နှင့်/သို့မဟုတ် ပစ်မှတ်ကို သတ်မှတ်သည် ။
HTML head Elements များ
Tag | Description |
---|---|
<head> | Defines information about the document |
<title> | Defines the title of a document |
<base> | Defines a default address or a default target for all links on a page |
<link> | Defines the relationship between a document and an external resource |
<meta> | Defines metadata about an HTML document |
<script> | Defines a client-side script |
<style> | Defines style information for a document |
ရနိုင်သော HTML တဂ်များ အားလုံး၏ စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။