<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>
Try it Yourself!
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>
Try it Yourself!
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 αα်αှα်αြα်း
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">
Try if Yourself!
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>
Try it Yourself!
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>
Try it Yourself!
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 αα့်αွα်းαိုα်αို့ α‘αွα် α‘αုံးαြုαါαα်။
