<head> Tage ဟာ HTML ရဲ့ မပါမဖြစ် element တစ်ခုဖြစ်ပြီး အရေးကြီပါတယ်။ အဲဒီ <head> tag ထဲမှာ <title> , <head> , <meta> , <link> , <script> နှင့် <link> စတဲ့အရေးကြီးတဲ့ အစိတ်အပိုင်းတွေ ပါဝင်ပါလိမ့်မယ်။
HTML <head> Tag
<htad> element ဆိုတာဟာ Metadata တွေထည့်နိုင်ဖို့အတွက် အစုအဝေးတစ်ခုဖြစ်ပါတယ်။ <head> tag ဟာ <html> tag အတွင်းမှာ <body> tag နှင့် အဆင့်တူရှိပါတယ်။
Metadata ဆိုတာကတော့ Html Document နှင့်သက်ဆိုင်တဲ့ အချက်အလက်များ ကို ဖြစ်ပါတယ်။ Metadata တွေဟာ Browser မှာ ဖေါ်ပြခြင်း မရှိပါဘူး။
ပုံမှန်အားဖြင့် Document Title , Character Set, Style, Script တွေပါဝင်ပြီး၊ အခြား Metadata များလည်း များစွာရှိပါတယ်။
The <title> Element
<title> ဆိုတဲ့အတိုင်းပါဘဲ html document ရဲ့ ခေါင်းစီး(Title) ကိုဖေါ်ပြဖို့ အတွက် အသုံးပြုတာဖြစ်ပါတယ်။ title ဟာ စာသားချည်းဘဲ ဖြစ်ရပါမယ်။ ပြီးတော့ အဲဒိ Title ကို Browser ရဲ့ Title Bar (သို့မဟုတ်) Page Tag မှာ ဖေါ်ပြပေးပါတယ်။
<title> element ဟာ html document တစ်ခုအတွက် မရှိမဖြစ်လိုအပ်တဲ့ element တစ်ခုပါ။
Page Title ဟာ Search Engine Optimization (SEO) အတွက် အလွန်အရေးပါလှပါတယ်။ title (ခေါင်းစီး) ဟာ စာသားတွေဘဲ ဖြစ်ရပါမယ်။ အဲဒီ title ထဲကစာသားများကို Browser ရဲ့ title bar (သို့) page tab မှာ ဖေါ်ပြပေးပါတယ်။
html document တစ်ခုမှာ <title> tag ဟာ မပါမဖြစ်ထည့်ရမယ့် အရာတစ်ခုဖြစ်ပါတယ်။
title စာသားများဟာ Search Engine Optimization (SEO) အတွက် အလွန်အရေးကြီးတဲ့ အပိုင်းကပါဝင်ပါတယ်။ Search Result မှာ ဖေါ်ပြတဲ့အခါ အဲဒိ Title ကို ယူပြီး ဖေါ်ပြလေ့ရှိပါတယ်။
<title> element ဟာ
- Browser Bar မှာ Page Title စာသားအဖြစ် ဖေါ်ပြပေးတယ်။
- Browser မှာ Bookmark (သို့) Favorates များအဖြစ် သတ်မှတ်တဲ့အခါမှာ ထို Title ကို အသုံးပြုပါတယ်။
- Search Engine Result မှာ ထို Title ကို ဖေါ်ပြပြီး ပြသပေးပါတယ်။
- ထိုအကြောင်းများကြောင့် <title> tag အတွင်းမှာ Post (သို့) Page တစ်ခုလုံးကို အဓိပ္ပါယ် ခြုံငုံနိုင်တဲ့ ခေါင်းစီး ကို ပေးထားဖို့ အလွန်အရေးကြီးပါတယ်။
Example Code
<!DOCTPYE html><html><head><title>A Meaningful Page Title</title></head><body>The Content of the document ......</body></html>
The <style> Element
<style> tag ဟာ HTML document တစ်ခုအတွက် element style များ သတ်မှတ်ရာမှာ အသုံးပါတယ်။
<style> element ကိုလည်း head tag ထဲမှာ ထားလေ့ရှိကြပါတယ်။
<style> tag ကို <body> ထဲမှာ ရေးရင်လည်း အလုပ်,လုပ်ပါတယ်။ ဒါပေမယ့် လိုအပ်မှသာ အသုံးပြုသင့်ပါတယ်။
Example Code
<style>body { background : pownderblue;}h1 { color : red;}p { color : blue;}</style>
The <link> Element
<link> element ကတော့ ကျွန်တော်တို့ html document နှင့် ပတ်သက်နေတဲ့ ပြင်ပအချက်အလက်များ (External Resource) များကို ချိတ်ဆက်ပေးဖို့အတွက် အသုံးပြုပါတယ်။
မကြာခဏ အသုံးပြုရတာကတော့ External Style Sheets နှင့် ချိတ်ဆက်ရခြင်းဘဲ ဖြစ်ပါတယ်။
Tip : CSS အကြောင်း အပြည့်အစုံးလေ့လာဖို့ အတွက် CSS Tutorials မှာသွားရောက် လေ့လာပါ။
The <meta> Element
<meta> element များကို character set သတ်မှတ်ခြင်း၊ page description သတ်မှတ်ခြင်း၊ keyword များသတ်မှတ်ခြင်း၊ စာရေးသူ သတ်မှတ်ခြင်း၊ နှင့် View Point Setting များသတ်မှတ်ခြင်း များအတွက် အများဆုံး အသုံးပြုပါတယ်။
Metadata တွေဟာ WebPage မှာ ပြသပေးခြင်းမရှိပါဘူး။ ဒါပေမယ့် Browser က ဘယ်လိုအလုပ်, လုပ်ပေးရမယ်ဆိုတွေ၊ Search Engine တွေ နှင့် အခြား Web Service များ အတွက် များစွာ အသုံးဝင်ပါတယ်။
Example
Character Set သတ်မှတ်ခြင်း
<meta charset="UTF-8">
Search Engine အတွက် Keyword များ သတ်မှတ်ခြင်း
<meta name="keywords" content="HTML, CSS, JavaScript">
Webpage အတွက် Description သတ်မှတ်ခြင်း
<meta name="description" content="Free Web Tutorials">
Webpage ၏ ရေးသားသူသတ်မှတ်ခြင်း
<meta name="author" content="John Doe">
စက္ကန့် ၃၀ တိုင်းမှာ Refresh ပြုလုပ်ခြင်း
<meta http-equiv="refresh" content="30">
Webpage ကို Device တိုင်းအတွက် အဆင်ပြေစေဖို့ ViewPort Setting သတ်မှတ်ခြင်း
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example of <meta> tag
<meta charset="UTF-8"><meta name="description" content="Free Web Tutorials"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="John Doe">
Setting the Viewport
Viewport ဆိုတာက ဝဘ်ဆိုက်ကို ဝင်ရောက်ကြည့်ရှုသူတွေ မြင်နိုင်မယ့် ဧရိယာတစ်ခုဖြစ်ပါတယ်။ ဝင်ရောက်ကြည့်ရှုသူ အသုံးပြုတဲ့ Device ပေါ်မူတည်ပြီး မြင်နိုင်တဲ့ ဧရိယာကလဲ အမျိုးမျိုး ဖြစ်နိုင်ပါတယ်။ ဥပမာအားဖြင့် မိုဘိုင်းဖုန်းနဲ့ ကြည့်တဲ့သူဟာ ကွန်ပျူတာနဲ့ကြည့်တဲ့သူထက် မြင်နိုင်တဲ့ ဧရိယာက ပိုသေးမယ်ပေါ့ဗျာ။
အဲဒီလို မတူညီတဲ့ Device တွေအားလုံးမှာ အဆင်ပြေပြေ ကြည့်ရှုနိုင်စေဖို့အတွက် Viewport ကို သုံးရပါတယ်။
Webpage တိုင်းမှာ ဒီအောက်က <meta> tag ကို ထည့်ကို ထည့်သင့်ပါတယ်။
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width ဆိုတာကတော့ အသုံးပြုသူရဲ့ Device Width ကို မြင်နိုင်မယ့် ဧရိယာရဲ့ Width အဖြစ် သတ်မှတ်လိုက်တာဖြစ်ပါတယ်။
initial-scale=1.0 ဆိုတာကတော့ Webpage ကို စစချင်း ဆွဲယူတဲ့အချိန်မှာ ပြသပေးမယ့် Zoom Level ကို သတ်မှတ်ပေးလိုက်တာဘဲ ဖြစ်ပါတယ်။
ကျွန်တော်တို့ အောက်မှာ Viewport ပါတဲ့ ဥပမာ တစ်ခုနှင့် မပါတဲ့ ဥပမာတစ်ခုကို နှိင်းယှည်ပြထားပါတယ်။ မိုဘိုင်းမှာ မြင်တွေရမယ့် ပုံစံများဖြစ်ပါတယ်။
သင်က မိုဘိုင်းနဲ့ ကြည့်နေတာဆိုရင် ဥပမာတွေရဲ့ အောက်က Link တွေမှာ ဝင်ရောက်ကြည့်ရှုနိုင်ပါတယ်။ ကွန်ပျူတာနဲ့ဆိုကြည့်လျှင်တော့ ထူးခြားမှုကို မြင်ရမှာ မဟုတ်ပါဘူး။ ပုံကိုဘဲ ကြည့်ပါ။
The <script> Element
<script> element ဟာ Client-side JavaScript တွေထည့်သွင်းရေးသားဖို့အတွက် အသုံးပြုတဲ့ element ဖြစ်ပါတယ်။
<script> tag ကိုလည်း <head>ထဲမှာရေးသားလေ့ရှိကြပါတယ်။
ဒါပေမယ့် <body> tag ရဲ့ နောက်ဆုံးမှာရေးတာကတော့ အကောင်းဆုံးပါ။ အဲဒါက Website ရဲ့ Loading ကို ပိုမိုမြန်ဆန်စေပါတယ်။
Example Code
<script>function myFunction(){document.getElemenById("demo").innerHTML = "Hello JavaScript";}</script>
Tip : JavaScript အကြောင်းအပြည့်အစုံကို လေ့လာရန် JavaScript Tutorials မှာ လေ့လာပါ။
The <base> Element
<base> element ဟာ Webpage တစ်ခုအတွင်းက Relative URL တွေအတွက် Base URL နှင့် Target ကို သတ်မှတ်ပေးနိုင်တဲ့ Eelment ဖြစ်ပါတယ်။
<base> tag မှာ href attribute နှင့် target attribute တွေကို အသုံးပြုနိုင်မှာဖြစ်ပါတယ်။
Document တစ်ခုမှာ <base> tag တစ်ခုသာ အသုံးပြုနိုင်ပါတယ်။ အသုံးနည်းတဲ့ element တစ်ခုလည်း ဖြစ်ပါတယ်။
Example
<head><base href="https://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>
Chapter Summary
<head>tag ကို metadat (data about data) တွေ ထည့်သွင်းဖို့ အသုံးပြုပါတယ်။<head>tag ကို<html>tag ထဲမှာ<body>tag နဲ့ Level တူထားပါရပါတယ်။<title>tag ဟာ Document Title အတွက် အသုံးပြုရတာဖြစ်ပြီး၊ အရေးကြီးတဲ့ element တစ်ခုပါ။<style>Tag ကတော့ html element တွေကို Style ထည့်ရာမှာအသုံးပြုပါတယ်။<link>tag ကတော့ external sytle sheet တွေချိတ်ဆက်ဖို့အတွက် မကြာခဏ အသုံးပြုရပါတယ်။<meta>tag ကတော့ character set, page description, keyword, Author နှင့် Viewport တွေ ထည့်သွင်းဖို့ အဓိကအသုံးပြုပါတယ်။<script>tag ကတော့ client-side JavaScript တွေရေးသားဖို့အတွက် အသုံးပြုပါတယ်။<base>tag ကိုတော့ Document အတွင်းက relative url တွေအတွက် Base URL နှင့် Target ထည့်သွင်းနိုင်ဖို့ အတွက် အသုံးပြုပါတယ်။
No comments:
Post a Comment