ওয়েবডিজাইন পর্ব-(০৩)
আসসালামু আলাইকুম,আশা করি সবাই ভালো আছেন।আজকে আমাদের ওয়েবডিজাইনের HTML পর্ব-(০৩) তে আপনাদের স্বাগতম। আজকে আমরা মূলত Elements,Attribute,নিয়ে আলোচনা করব।
*১ম ক্লাসে আমরা বলেছিলাম যে ওয়েবডিজাইন করতে অনেকেই অনেক রকমের কোডএডিটর ব্যবহার করে থাকে,আজকে আমরা কোডএডিটর(notepad) ব্যবহার না করে এর এডভান্সটা (notepad++) ব্যবহার করব।এটা ব্যবহারের বেশ কিছু সুবিধা রয়েছে।যেমন- আপনার কোনো ট্যাগ লিখতে যদি ভুল হয়ে থাকে তাহলে বোঝা যাবে,বা আপনি যদি কোনো স্টার্ট ট্যাগে ক্লিক করেন তাহলে সে উক্ত ট্যাগের End ট্যাগও দেখিয়ে দিবে।
- এই কোডএডিটর ডাউনলোড করে নিতে হবে,সেইজন্য আপনি Google এর সাহায্য নিতে পারেন।Google এর সার্চ এর ঘরে গিয়ে notepad++ লিখে দিলে ডাউনলোড লিঙ্ক আসবে,দয়া করে সেইখান থেকে ডাউনলোড করে নিবেন।আর যদি এই মূহুর্তে কারও ডাউনলোড দেওয়া সম্ভবপর না হয় তাহলে আপনি notepad ব্যবহার করতে পারেন।
Elements:
প্রথমে গত ক্লাসের মত একই ভাবে notepad++ ওপেন কর(যার notepad++ নেই তারা notepad টা ওপেন কর)।তারপর HTML এর মেইন স্টাকচারটা লিখুন।যেমনঃ-
<html>
<head>
<title>Elements</title>
</head>
<body>
<b>this is a bold text</b>
</body>
</html>
Elements:
Title নিয়ে আমরা আগেই আলোচনা করেছি,যেহেতু আমরা Elements নিয়ে কাজ করছি তাই আমরা Title টা Elements দিয়েছি।
আমরা আগেই বলেছিলাম যে <….> এবং </…..>এর মধ্যে যেটি থাকে তাদের আমরা html এর ভাষায় ট্যাগ বলে থাকি,এবং এইটা হচ্ছে Bold tag.লেখাগুলোকে Bold করার জন্য এই ট্যাগ ব্যবহার করে থাকা হয়।এখন এই Bold ট্যাগের মধ্যে অবস্থিত—–
<b>this is a bold text</b>
this is a bold text এইটা হচ্ছে আমাদের Elements ।আপনারা যদি কোনো লেখাকে italic করতে চান তাহলে একই ভাবে <i>
.<i/> এই ইতালিক ট্যাগ ব্যবহার করতে পারবেন।এর মাঝে আমরা যেকোনো লেখা দিতে পারি।যেমনঃ
<i>this is a italic text</i> এখানে this is a italic tag হচ্ছে Elements ।
আমরা যদি body ট্যাগের মধ্যে italic এবং bold ট্যাগ ব্যবহার করি ।(আমি বুঝানোর ক্ষেত্রে আবার লিখলাম,আপনারা শুধু <b>this is a bold text </b> এইটার নিচে <i>this is a italic text</i> এই ট্যাগটা দেন)
যেমনঃ
<html>
<head>
<title>Elements</title>
</head>
<body>
<b>this is a bold text</b>
<i>this is a italic text</i>
</body>
</html>
Elementsএখন আগের মতই Elements.html দিয়ে সেভ কর,
(আপনারা যারা notepad++ ব্যবহার করতেছেন তারা একই ভাবে সেইভ করে উপরের ট্যাবে লক্ষ্য কর, দেখবেন Run নামে একটা বাটম আছে,ঐখানে ক্লিচ করে আপনি আপনার ইচ্ছে মত ব্রাউজার দিয়ে ওপেন করতাহলে নিচের মত একটা বোল্ড এবং অন্যটা ইতালিক টেক্সট লক্ষ্য করা যাবে।
this is a bold text
this is a italic text
Attribute:
একই ভাবে notepad++ বা notepad ওপেন কর,তারপর—-মেইন স্টাকচার লিখুন।যেমনঃ
<html>
<head>
<title>Attribute</title>
</head>
<body>
<font size=”40px” color=”green”>this is a 40px & green color text</font>
</body>
এখানে আমরা font ট্যাগ ব্যবহার করেছি।এখানে font size=”….” এবং color=”……”এইটা হচ্ছে আমাদের Attribute এবং 40px & green হচ্ছে value.
valueটা আমরা ইচ্ছে মত পরিবর্তন করতে পারি । 20px, 30px, 50px বা red,blue,yellow,purple আরোও ইচ্ছে মত দিতে পারি।এখানে px =pixel ।font টা কত pixel হবে সেইটা বুঝানো হয়ে থাকে।
এখন আগের মতই সেভ করে ,যেকোনো ব্রাউজার দিয়ে ওপেন কর তাহলে নিচের মত টেক্সট দেখতে পাবেন।
this is a 40px & green color text
আজকে আমাদের নিয়ে Pragraph আলোচনা করার কথা ছিল কিন্তু সময় সল্পতার জন্য লিখতে পারলাম না,সেই জন্য একান্তই দুঃখিত।ইনশাআল্লাহ পরের পোষ্টে paragraph এর সাথে আরো নতুন কিছু নিয়ে আপনাদের মাঝে হাজির হব।
*আর হ্যাঁ আমাদের অফিশিয়াল গ্রুপে অনেক Tag এবং Attributes দেওয়া আছে।সেইগুলো মনে করে ডাউনলোড করে মুখস্থ করে নিবেন।**
আমাদের গ্রুপঃ www.facebook.com/groups/infonetbd
ফেসবুকে আমিঃ www.facebook.com/morshed.islam.33
***আমাদের ৭ম ব্যচের জন্য ওয়েবডিজাইন সহ আরো বিভিন্ন কোর্সে রেজিস্ট্রেশন চলতেছে।যারা আগ্রহী তারা অতি শিঘ্রই রেজিস্ট্রেশন কর।
রেজিস্ট্রেশন লিঙ্কঃ www.infonetbd.org/registration
**************ধন্যবাদ*********************