HTML စာအုပ်ဖန်တီးနည်း
စက်ပစ္စည်းများ၊ PC၊ လက်ပ်တော့၊ တက်ဘလက်နှင့် ဖုန်းအားလုံးတွင် အလုပ်လုပ်မည့် HTML စာအုပ်ကို ဖန်တီးနည်းကို လေ့လာပါ။
ပထမဦးစွာ အခြေခံ HTML Page တစ်ခုကို ဖန်တီးပါ။
HTML သည် ဝဘ်ဆိုဒ်များဖန်တီးရန်အတွက် စံသတ်မှတ်ထားသော ဘာသာစကားဖြစ်ပြီး CSS သည် HTML စာရွက်စာတမ်းတစ်ခု၏ ပုံစံကို ဖော်ပြသည့် ဘာသာစကားဖြစ်သည်။
အခြေခံ HTML စာအုပ်တစ်အုပ်ဖန်တီးရန် HTML နှင့် CSS ကို ပေါင်းစပ်ပါမည်။
HTML skeleton ဖြင့် ပထမဆုံး စတင်ပါ။
ဥပမာ
<!DOCTYPE html>
<html>
<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
နမူနာရှင်းပြထားပါတယ်။
<!DOCTYPE html>စာရွက်စာတမ်းအမျိုးအစားမှာ HTML ဖြစ်သည်။<html> </html>စာရွက်စာတမ်း၏အစနှင့်အဆုံး<head> </head>စာရွက်စာတမ်းအချက်အလက်၏အစနှင့်အဆုံး<title>စာအုပ်ခေါင်းစဉ် ("ငါ့စာအုပ်")<meta charset="UTF-8">အသုံးပြုထားသော စာလုံးအစုံ (UTF-8)<body> </body>အစနှင့်အဆုံးမြင်နိုင်သောအကြောင်းအရာ<h1> </h1>ခေါင်းစဉ်တစ်ခု၏အစနှင့်အဆုံး<p> </p>စာပိုဒ်၏အစနှင့်အဆုံး
အထက်ဖော်ပြပါ code များသည် HTML tag များဖြစ်သည်။
HTML မှတ်တမ်းတစ်ခု၏ အကြောင်းအရာကို သတ်မှတ်ရန် HTML တက်ဂ်များကို အသုံးပြုသည်။
တဂ်များသည် (ထက်နည်းသော လက္ခဏာ) ဖြင့် အစ <ပြုပြီး အဆုံးတွင် (ထက်ကြီးသော လက္ခဏာ) ဖြင့် အဆုံးသတ်သည်
>။
ဤနည်း ဖြင့် စာပိုဒ်တစ်ခု၏ အစ <p>နှင့် </p>အဆုံးကို အမှတ်အသားပြုရန် အသုံးပြုသည်။
မှတ်ချက်- HTML ကို အသေးစိတ်လေ့လာလိုပါက ကျွန်ုပ်တို့၏ HTML Tutorial ကို ဖတ်ရှုပါ ။
<html>အပြည့်အဝမှန်ကန်စေရန်၊ စာအုပ်တွင်အသုံးပြုသောဘာသာစကားကိုသတ်မှတ်ရန်အတွက် တဂ် တွင် ဘာသာစကားရည်ညွှန်းချက်တစ်ခု ထည့်သွင်းသင့်သည် -
<html lang="en">
အောက်ဖော်ပြပါ မက်တာအချက်အလက်ကို ထည့်သွင်းခြင်းဖြင့် သင့်စာအုပ်ကို စက်အားလုံး၊ PC၊ လက်ပ်တော့၊ တက်ဘလက်၊ နှင့် ဖုန်းအားလုံးတွင် မှန်ကန်စွာပြသနိုင်စေသည်-
<meta name="viewport" content="width=device-width, initial-scale=1">
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
အကြောင်းအရာဇယားတစ်ခုဖန်တီးပါ။
ဒြပ်စင်များ အတွင်းတွင် <body> </body>၊ အကြောင်းအရာဇယားတစ်ခုထည့်ပါ-
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
ပုံစံအချို့ကို ထည့်ပါ။
သင့်စာအုပ်တွင် ပုံစံစာရွက်တစ်ခုထည့်ပါ-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
မှတ်ချက်- CSS ကို အသေးစိတ်လေ့လာလိုပါက ကျွန်ုပ်တို့၏ CSS Tutorial ကို ဖတ်ရှုပါ ။
အခန်း ၁ အတွက် HTML စာမျက်နှာ ဖန်တီးပါ။
ဖိုင်- philosophy_chapter1.htm
<body class="w3-content">
<div class="w3-container">
<h1>1. Metaphysics</h1>
<h3>The nature of reality.</h3>
<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>
<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>
<p>Is this Virtual Reality real?</p>
<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>
</body>
အခန်း ၁ သို့ လင့်ခ်တစ်ခုထည့်ပါ။
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
အထက်ဖော်ပြပါ ဥပမာတွင်၊ ကျွန်ုပ်တို့သည် စာအုပ်၏ ပထမအခန်းကို အမည်ပေးထားပါသည်။
" philosophy_chapter1.htm "။
အသုံးပြုရမည့်အမည်သည် သင့်အတွက်ဖြစ်သည်။ ဖြစ်ရင် "Metaphysics" လို့ ခေါ်သင့်တယ်။
မည်သို့ပင်ဖြစ်စေ အထက်ဖော်ပြပါအတိုင်း ဆက်လက်လုပ်ဆောင်ပြီး အခြားအခန်းများကို ဖန်တီးပါ။
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
အခန်းတစ်ခုစီသို့ လင့်ခ်တစ်ခုထည့်ပါ။
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>
<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>
<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>
<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>
<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>
</body>