HTML ပုံစံလမ်းညွှန်
တသမတ်တည်း၊ သန့်ရှင်းပြီး သပ်ရပ်သော HTML ကုဒ်သည် အခြားသူများ သင့်ကုဒ်ကို ဖတ်ရန်နှင့် နားလည်ရန် ပိုမိုလွယ်ကူစေသည်။
ဤသည်မှာ ကောင်းမွန်သော HTML ကုဒ်ဖန်တီးရန်အတွက် လမ်းညွှန်ချက်များနှင့် အကြံပြုချက်အချို့ဖြစ်သည်။
စာရွက်စာတမ်းအမျိုးအစားကို အမြဲကြေညာပါ။
စာရွက်စာတမ်းအမျိုးအစားကို သင့်စာရွက်စာတမ်းရှိ ပထမစာကြောင်းအဖြစ် အမြဲတမ်းကြေငြာပါ။
HTML အတွက် မှန်ကန်သော စာရွက်စာတမ်းအမျိုးအစားမှာ-
<!DOCTYPE html>
စာလုံးအသေး အစိတ်အပိုင်းအမည်များကို အသုံးပြုပါ။
HTML သည် ဒြပ်စင်အမည်များတွင် စာလုံးအကြီးနှင့် စာလုံးငယ်များကို ရောနှောခွင့်ပြုသည်။
သို့သော်၊ အကြောင်းမှာ၊ အကြောင်းမှာ စာလုံးသေးဒြပ်စင်အမည်များကို အသုံးပြုရန် အကြံပြုလိုပါသည်၊
- စာလုံးအကြီးနှင့် အသေးအမည်များကို ရောစပ်ထားခြင်းသည် မကောင်းပါ။
- Developer များသည် ပုံမှန်အားဖြင့် စာလုံးသေးအမည်များကို အသုံးပြုကြသည်။
- စာလုံးအသေးက ပိုသန့်တယ်။
- စာလုံးသေး ရေးရတာ ပိုလွယ်တယ်။
ကောင်းသည်-
<body>
<p>This is a paragraph.</p>
</body>မကောင်း
<BODY>
<P>This is a paragraph.</P>
</BODY>HTML Elements အားလုံးကို ပိတ်ပါ။
HTML တွင်၊ သင်သည် ဒြပ်စင်များအားလုံးကို ပိတ်ရန် မလိုအပ်ပါ (ဥပမာ <p>ဒြပ်စင်)။
သို့သော်၊ ဤကဲ့သို့သော HTML ဒြပ်စင်အားလုံးကို ပိတ်ရန် ကျွန်ုပ်တို့ အလေးအနက် အကြံပြုလိုသည်-
ကောင်းသည်-
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>မကောင်း
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>စာလုံးအသေးအမည်များကို အသုံးပြုပါ။
HTML သည် attribute အမည်များတွင် စာလုံးအကြီးနှင့် စာလုံးသေးများကို ရောစပ်နိုင်စေပါသည်။
သို့သော်၊ အကြောင်းမှာ၊ အကြောင်းမှာ၊ အကြောင်းမှာ စာလုံးအသေးအမည်များကို အသုံးပြုရန် အကြံပြုလိုပါသည်၊
- စာလုံးအကြီးနှင့် အသေးအမည်များကို ရောစပ်ထားခြင်းသည် မကောင်းပါ။
- Developer များသည် ပုံမှန်အားဖြင့် စာလုံးသေးအမည်များကို အသုံးပြုကြသည်။
- စာလုံးအသေးက ပိုသန့်တယ်။
- စာလုံးသေး ရေးရတာ ပိုလွယ်တယ်။
ကောင်းသည်-
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>မကောင်း
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>အမြဲတမ်း Quote Attribute တန်ဖိုးများ
HTML သည် ကိုးကားခြင်းမရှိဘဲ အရည်အချင်းတန်ဖိုးများကို ခွင့်ပြုသည်။
သို့ရာတွင်၊ ကျွန်ုပ်တို့သည် ရည်ညွှန်းချက်တန်ဖိုးများကို ကိုးကားရန် အကြံပြုသောကြောင့်၊
- Developer များသည် ပုံမှန်အားဖြင့် attribute တန်ဖိုးများကို ကိုးကားကြသည်။
- ကိုးကားထားသောတန်ဖိုးများသည် ဖတ်ရန်ပိုမိုလွယ်ကူသည်။
- တန်ဖိုးတွင် နေရာလွတ်များပါရှိလျှင် ကိုးကားချက်များကို သင်အသုံးပြုရပါမည်။
ကောင်းသည်-
<table
class="striped">မကောင်း
<table class=striped>အရမ်းဆိုးတယ်
တန်ဖိုးတွင် နေရာလွတ်များ ပါရှိသောကြောင့် ၎င်းသည် အလုပ်မဖြစ်ပါ။
<table class=table striped>ပုံများအတွက် အမြဲတမ်း alt၊ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်ပါ။
altပုံများအတွက် အရည်အချင်းကို အမြဲသတ်မှတ်ပါ ။ အကြောင်းတစ်ခုခုကြောင့် ပုံအား မပြသနိုင်ပါက ဤ attribute သည် အရေးကြီးပါသည်။
widthထို့အပြင်၊ ပုံများ နှင့်
heightပုံများကို အမြဲသတ်မှတ်ပါ ။ ဘရောက်ဆာသည် မတင်မီတွင် ပုံအတွက် နေရာလွတ်ထားနိုင်သောကြောင့် ၎င်းသည် တုန်ခါမှုကို လျှော့ချပေးသည်။
ကောင်းသည်-
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">မကောင်း
<img
src="html5.gif">နေရာလွတ်များနှင့် တူညီသော လက္ခဏာများ
HTML သည် တူညီသော လက္ခဏာများ ပတ်လည်တွင် နေရာလွတ်များကို ခွင့်ပြုသည်။ သို့သော် space-less သည်ဖတ်ရန်ပိုမိုလွယ်ကူပြီး entities များကိုအတူတကွပိုကောင်းအုပ်စုဖွဲ့ပါ။
ကောင်းသည်-
<link rel="stylesheet" href="styles.css">မကောင်း
<link
rel = "stylesheet" href = "styles.css">ကုဒ်ရှည်များကို ရှောင်ပါ။
HTML တည်းဖြတ်သူအား အသုံးပြုသောအခါ HTML ကုဒ်ကိုဖတ်ရန် ညာဘက်နှင့် ဘယ်ဘက်သို့ ရွှေ့ရန် အဆင်မပြေပါ။
ရှည်လျားလွန်းသော ကုဒ်လိုင်းများကို ရှောင်ရှားရန် ကြိုးစားပါ။
ဗလာလိုင်းများ နှင့် Indentation
အကြောင်းပြချက်မရှိဘဲ မျဉ်းလွတ်များ၊ နေရာလွတ်များ သို့မဟုတ် ကွက်လပ်များကို မထည့်ပါနှင့်။
ဖတ်ရှုနိုင်စေရန်အတွက်၊ ကြီးမားသော သို့မဟုတ် ယုတ္တိကုဒ်တုံးများကို ခွဲရန် ဗလာစာကြောင်းများကို ထည့်ပါ။
ဖတ်ရှုနိုင်စေရန်အတွက်၊ အင်တင်းအကွက်နှစ်ခုကို ထည့်ပါ။ တက်ဘ်ကီးကို မသုံးပါနှင့်။
ကောင်းသည်-
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
မကောင်း
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
ကောင်းသောဇယားနမူနာ-
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
စာရင်းကောင်း ဥပမာ-
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<title> Element ကို ဘယ်တော့မှ မကျော်ပါနဲ့။
HTML တွင် <title>အစိတ်အပိုင်း လိုအပ်သည်။
စာမျက်နှာခေါင်းစဉ်၏ အကြောင်းအရာများသည် ရှာဖွေရေးအင်ဂျင် ပိုမိုကောင်းမွန်အောင်ပြုလုပ်ခြင်း (SEO) အတွက် အလွန်အရေးကြီးပါသည်။ ရှာဖွေမှုရလဒ်များတွင် စာမျက်နှာများကို စာရင်းပြုစုသည့်အခါ အမှာစာဆုံးဖြတ်ရန် စာမျက်နှာခေါင်းစဉ်ကို ရှာဖွေရေးအင်ဂျင် အယ်ဂိုရီသမ်များက အသုံးပြုသည်။
ဒြပ် စင် <title>-
- ဘရောက်ဆာတူးလ်ဘားတွင် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည်။
- ၎င်းကို စိတ်ကြိုက်များထဲသို့ ထည့်သောအခါတွင် စာမျက်နှာအတွက် ခေါင်းစဉ်တစ်ခုပေးသည်။
- ရှာဖွေရေးအင်ဂျင်ရလဒ်များတွင် စာမျက်နှာအတွက် ခေါင်းစဉ်တစ်ခုပြသည်။
ထို့ကြောင့် ခေါင်းစဉ်ကို အတတ်နိုင်ဆုံး တိကျပြီး အဓိပ္ပါယ်ရှိအောင် ကြိုးစားပါ။
<title>HTML
Style Guide and Coding Conventions</title>
<html> နှင့် <body> ကို ချန်လှပ်ထားပါသလား။
<html>HTML စာမျက်နှာတစ်ခုသည် နှင့်
<body>tags များ မပါဘဲ အတည်ပြုလိမ့်မည် -
ဥပမာ
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<html>သို့သော်၊ နှင့်
<body>tags များကို အမြဲထည့်ရန်ကျွန်ုပ်တို့အလေးအနက်အကြံပြုပါသည် ။
ချန်လှပ်ခြင်းသည် <body>ဘရောက်ဆာအဟောင်းများတွင် အမှားအယွင်းများ ဖြစ်ပေါ်စေနိုင်သည်။
ချန်လှပ် <html>ထားပြီး <body>
DOM နှင့် XML ဆော့ဖ်ဝဲကိုလည်း ပျက်စီးစေနိုင်သည်။
<head> ကို ချန်လှပ်ထားမလား။
HTML <head> tag ကိုလည်း ချန်လှပ်ထားနိုင်ပါသည်။
<body>ဘရောက်ဆာများသည် မူလဒြပ်စင်တစ်ခုသို့ ရှေ့တွင် ဒြပ်စင်အားလုံးကို ပေါင်းထည့်မည်ဖြစ်သည် <head>
။
ဥပမာ
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
သို့သော်၊ <head>ကျွန်ုပ်တို့သည် tag ကိုအသုံးပြုရန်အကြံပြုပါသည်။
Empty HTML Elements တွေကို ပိတ်မလား။
HTML တွင်၊ ဗလာဒြပ်စင်များကို ပိတ်ရန် ရွေးချယ်နိုင်သည်။
ခွင့်ပြုသည်-
<meta
charset="utf-8">
ခွင့်ပြုထားသည်-
<meta charset="utf-8" />
XML/XHTML ဆော့ဖ်ဝဲကို သင့်စာမျက်နှာသို့ ဝင်ရောက်ရန် မျှော်လင့်ပါက၊ ၎င်းသည် XML နှင့် XHTML တို့တွင် လိုအပ်သောကြောင့် အပိတ်မျဉ်းစောင်း (/) ကို ထားပါ။
lang Attribute ကိုထည့်ပါ။
ဝဘ်စာမျက်နှာ၏ဘာသာစကားကိုကြေငြာရန် သင် langက tag အတွင်းရှိ attribute ကို အမြဲထည့်သွင်းသင့်သည် ။ <html>၎င်းသည် ရှာဖွေရေးအင်ဂျင်များနှင့် ဘရောက်ဆာများကို ကူညီရန် ရည်ရွယ်သည်။
ဥပမာ
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
မီတာဒေတာ
မှန်ကန်သော အဓိပ္ပာယ်ဖွင့်ဆိုမှုနှင့် မှန်ကန်သော ရှာဖွေရေးအင်ဂျင် အညွှန်းကိန်းကို သေချာစေရန်၊ HTML စာရွက်စာတမ်းတစ်ခုတွင် ဘာသာစကားနှင့် ဇာတ်ကောင်ကုဒ်ကို တတ်နိုင်သမျှ စောစီးစွာ သတ်မှတ်သင့်သည်-<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Viewport ကို သတ်မှတ်ခြင်း။
မြင်ကွင်းပို့တ်သည် ဝဘ်စာမျက်နှာတစ်ခု၏ အသုံးပြုသူမြင်နိုင်သော ဧရိယာဖြစ်သည်။ ၎င်းသည် စက်ပစ္စည်းနှင့် ကွဲပြားသည် - ၎င်းသည် ကွန်ပြူတာစခရင်ထက် မိုဘိုင်းလ်ဖုန်းတွင် သေးငယ်မည်ဖြစ်သည်။
<meta>သင့်ဝဘ်စာမျက်နှာများအားလုံးတွင် အောက်ပါဒြပ်စင်များ ထည့်သွင်းသင့်သည် -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
၎င်းသည် စာမျက်နှာ၏အတိုင်းအတာနှင့် အရွယ်အစားကို ထိန်းချုပ်နည်းကို ဘရောက်ဆာအား လမ်းညွှန်ပေးပါသည်။
အပိုင်းသည် စက် ၏ width=device-widthစခရင်အကျယ်ကို လိုက်နာရန် စာမျက်နှာ၏ အကျယ်ကို သတ်မှတ်သည် (၎င်းသည် စက်ပေါ် မူတည်၍ ကွဲပြားလိမ့်မည်)။
စာမျက်နှာ initial-scale=1.0ကို ဘရောက်ဆာမှ ပထမဆုံး တင်သောအခါ အပိုင်းသည် ကနဦးချုံ့ချဲ့မှုအဆင့်ကို သတ်မှတ်ပေးသည်။
ဤသည်မှာ viewport မက်တာတက်ဂ် မပါဘဲ ဝဘ်စာမျက်နှာတစ်ခု၏ ဥပမာတစ်ခု နှင့် viewport မက်တာတက်ဂ်ပါသည့် ဝဘ်စာမျက်နှာ၏ တူညီ သည်-
အကြံပြုချက်- သင်သည် ဤစာမျက်နှာကို ဖုန်း သို့မဟုတ် တက်ဘလက်တစ်ခုဖြင့် ကြည့်ရှုနေပါက၊ ခြားနားချက်ကို ကြည့်ရန် အောက်ပါလင့်နှစ်ခုကို နှိပ်နိုင်ပါသည်။
HTML မှတ်ချက်များ
မှတ်ချက်တိုများကို ဤကဲ့သို့ စာကြောင်းတစ်ကြောင်းတွင် ရေးသင့်သည်-
<!-- This is a comment -->
စာကြောင်းတစ်ခုထက်ပိုသော မှတ်ချက်များကို ဤကဲ့သို့ရေးသားသင့်သည်-
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
ရှည်လျားသော မှတ်ချက်များသည် ၎င်းတို့ကို ကွက်လပ်နှစ်ခုဖြင့် ဘောင်ခတ်ထားလျှင် စောင့်ကြည့်ရလွယ်ကူသည်။
Style Sheets ကိုအသုံးပြုခြင်း။
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.