CSS Stylesheet ကိုအသုံးပြုခြင်း။
ဤအရာကို ပြောင်းလဲပါ-
<link rel="stylesheet" href="">
ဤသို့-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
စတိုင်စာရွက်ကိုအသုံးပြုရန် သင်စတိုင်ထုတ်လိုသော HTML အစိတ်အပိုင်းများသို့ အတန်းတစ်ခုကို ပေါင်းထည့်ရပါမည်။
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
HTML/CSS အရိုးစု
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
၎င်းအလုပ်လုပ်ပုံကိုကြည့်ရန် "သင်ကိုယ်တိုင်စမ်းသုံးကြည့်ပါ" ခလုတ်ကိုနှိပ်ပါ။
ကွန်တိန်နာ၏ နောက်ခံအရောင်ကို စိမ်းပြာရောင်မှ အနက်ရောင်သို့ ပြောင်းကြည့်ပါ။
မင်းလုပ်ခဲ့တာလား။
ဂုဏ်ယူပါသည်။
စတိုင်စာရွက်အသုံးပြုခြင်း၏ အခြေခံများကို ယခုမှ သင်သင်ယူပြီးဖြစ်သည်။
ဆက်ဖတ်ပါ။
တုံ့ပြန်မှုနည်း
HTML ကုဒ်
<div class="w3-row">
<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>
</div>
ကတ်ဖန်တီးနည်း
တကယ်အဆင့်မြင့်တဲ့အရာအတွက် အဆင်သင့်ဖြစ်ပြီလား။
HTML မှာ Business Card က ဘယ်လိုလဲ။
ရုပ်ပုံနှင့် စာသား နှစ်မျိုးလုံး ပါဝင်သည်။
Play with the code below for a while, until you think you got a grip on it.
After that, we will start coding really fantastic HTML pages.
John Doe
Engineer
HTML Code
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>