নিজে নিজেই শিখি Html , পর্ব - ০৩ ।। Learning Html Part 03
নমস্কার/আদাব।
আশা করি সকলেই ভালো আছেন আর সেই সাথে আমিও অনেক অনেক ভালোই আছি।
আজকে আবারও পর্ব তিন নিয়ে আপনাদের সাথে আমি হাজির হয়েছি , আশা করি আজকের পর্বও আপনাদের অনেক অনেক ভালোই লাগবে। তো বন্ধুরা চলুন শুরু করা যাক।
...LETS START...
আমি গত পর্বে আপনাদের বলেছিলাম যে আজকে নতুন পর্ব নিয়ে আপনাদের সামনে হাজির হব কিন্তু একটু দেরি হয়ে গেল।
 |
নিজে নিজেই শিখি Html , পর্ব - ০৩ ।। Learning Html Part 03 |
এ জন্য সত্যিই আমি খুব দুঃখিত। হ্যা , তাই আজ আর দেরি না করে সরারসরি আমাদের টিউনের মূল বিষয়ে ফীরে আসা যাক।
আমি গত পর্বে বলেছিলাম আজ আপনাদের সাথে আমার আলোচ্য বিষয় হল - css. তাই না। হ্যা , আজ আমি আপনাদের সাথে css নিয়েই
কথা বলতে এসেছি।
আপনাদের একটা কথা না বললেই নয়। css অনেক বড় একটা অধ্যায়। কিন্তু যে টুকু না জানলেই নয় সেই সকল বিয়য় নিয়েই আজকের টিউন টি আমি সাজিয়েছি।
# কি ভাবে html এ css যুক্ত করবেন - How To Add Css In Html ?
সর্ব প্রথমে আমি আপনাদের মাঝে একটি html Tag লিখে সাধারন ভাবে Css যুক্ত করব।
Html Tag টি হচ্ছে -
<div id="header">SMsudipBD.Com</div><div class="header">SMsudipBD.Com</div>
উপরিক্ত Html Tag দুইটি যদি আমরা একটু লক্ষ্য করি তাহলে দেখতে পারব প্রথম Html div Tag টি id এবং দ্বিতীয় Html divTag
টি class , কিন্তু দুই টির নাম একই তাই না - header.
মূলত css এ id কিংবা class এর মধ্যে কোন রকম পার্থক্য নেই। দুই টিই একই কাজ করে। এদের শুধু মাত্র আলাদা ভাবে লেখা হয় মাত্র।
যদি css টি id হয় তবে এটি #(hash) দিয়ে শুরু হয়।
আবার যদি css টি class হয় তবে css টি .(dot) দিয়ে শুরু হয়।
এখন আমরা যে দুইটি সিএসএস নিয়েছিলাম একটি ছিল id এবং অন্য টি ছিল class. এবং নাম ছিল একই - header.
তাহলে আমি css দুইটি লিখছি - একটু ভালভাবে লক্ষ্য করুন।
<style type="text/css">#header {background:#000000;color:#ffffff;font-size:20px;padding:10px;}.Header {background:#000000;color:#ffffff;font-size:20px;padding:10px;}</style>
দেখলেন তো কি ভাবে css লিখতে হয়। আমি জানি আপনারা হয়ত কিছুই বুঝতে পারলেন না। আমিও প্রথম যখন শিখছিলাম কিছুই বুঝিনি কিন্তু ধীরে ধীরে প্রাকটিস করতে করতে এখন আর বুঝতে কোন রকম অসুবিধা হয় না। আপনারাও এক সময় অনেক দক্ষ হয়ে যাবেন আশা করি।
এখন আমরা আমাদের টিউনের মূল বিষয়ে একটু চলে যাই কি বলেন। কারন আমি বলেছিলাম একটি Homepage Design করে দেখাব। আমি একটি সাধারন Structure ও দিয়েছিলাম , মনে আছে কি ?
উক্ত Html Tag গুলো একটু আমি Modify করে দিচ্ছি। কারন css Add করলে css কে Connect ও তো করতে হবে তাই না। আপনারা একটু ভালো ভাবে লক্ষ্য রেখে যাবেন।
<html><head><title>Homepage Design - SMsudipBD.Com</title><style type="text/css">body {margin: 0;padding: 0;background: #ddd;}#header {background: #000000;color: #ffffff;font-size: 20px;padding: 10px;text-align: center;}.Header {background:#000000;color:#ffffff;font-size:20px;padding:10px;}#content {display: flex;margin: 10px 10%;}.article {width: 60%;background: #000000;padding: 5px;color: #ffffff;margin: 0px 2px;}.sidebar {width: 40%;background: #000000;padding: 5px;color: #ffffff;margin: 0px 2px;}.copyright {background: #000000;color: #ffffff;font-size: 20px;padding: 50px;text-align: center;}</style></head><body><header><div id="header">SMsudipBD.Com</div></header><content><div id="content"><div class="article">This Is Article.</div><div class="sidebar">This Is Sidebar.</div></div></content><footer><div class="copyright">Copyright @ 2022</div></footer></body></html>
দেখুন আমাদের Homepage Design হয়ে গেছে। চলুন তবে সেই Homepage এর Demo টা দেখে নেই।
 |
Homepage Design Demo |
আজকের টিউন টি আপনাদের কেমন লেগেছে কমেন্ট করে জানাতে ভূলবেন না। তাহলে পরিশেষে আজকের মত এখানেই বিদায় নিচ্ছি।
পরের পর্ব আগামি কালই দেওয়ার চেষ্টা করব। সেই পর্যন্ত সাথেই থাকুন এবং সকলেই ভালো থাকুন এবং সুস্থ থাকুন।
টাটা। বাই।
ক্রেডিট বাইঃ- এস এম সুদীপ বিডি ডট কম।
ট্যাগঃ- নিজে নিজেই শিখি Html , পর্ব - ০৩ ।। Learning Html Part 03,Learning css,css tricks and tips,html programming,hml homepage design,html landing page design,html form design,html login signup page design,input এর ব্যবহার।
পোস্ট রেটিং করুন
|
SMsudipBD.Com
Web Development & Design. |
টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!