ওয়েবডিজাইন ২য় পর্বে আপনাদের স্বাগতম।গত পর্বে আমরা HTML ও ওয়েবডিজাইন সম্পর্কে বেসিক কিছু ধারণা দিয়েছি।আজকে আমরা code editor, Tag, heading & paragraph নিয়ে আলোচনা করব।
তার আগে আমাদের যেটি যা লাগবেঃ
*একটি ব্রাউজার(যেকোনো ব্রাউজার হলেই হবে)যেমনঃ Firefox, google crome,opera,default browser ETC…
*কোড এডিটর
আপনার কম্পিউটারের স্টার মেনুতে গিয়ে সার্চের ঘরে গিয়ে notepad লিখে সার্চ দিন,তাহলে notepad নামে একটা এপ্স দেখতে পাবেন।এটাকেই কোড এডিটর বলা হয়।আরো অনেক অন্যতমানের কোডএডিটর আছে ঐগুলো নিয়ে পরে একদিন আলোচনা করা হবে।
TAG:
মূলত <> এবং </> এই দুই এঙ্গেল ব্রাকেটের মধ্যে HTML এর বিভিন্ন ট্যাগ ব্যবহার করা হয়ে থাকে।<> এটাকে বলা হয় Start tag এবং </> এটাকে End tag বলা হয়।প্রত্যেক ট্যাগেরই
End tag থাকে কিন্তু কিছু কিছু ট্যাগ আছে যাদের মাত্র একটি ট্যাগই থাকে।
যেমনঃ HTML প্রধান দুটি ট্যাগ হচ্ছেওএদেরকে বলা হয় Start Tag এবংও এদেরকে বলা হয় End Tag ।
ব্যতিক্রমঃ এই ট্যাগের শুধুমাত্র একটি ট্যাগ বিদ্যমান।এই ট্যাগকে Break tag বলা হয়ে থাকে।এটা নিয়ে পরে বিস্তারিত বলব।
HTML এর মেইন স্টাকচারঃ
<html>
<head>
</head>
<body>
</body>
</html>
এটিই হল html এর মেইন স্টাকচার।
ত চলুন শুরু করা যাক। প্রথমে কোডএডিটর (নোটপ্যাড) ওপেন করতারপর উক্ত স্টাকচারটা নোটপ্যাডে লিখুন।কখনও কপি-পেস্ট করার চেষ্টা করবেন না এতে আপনারই ক্ষতি হবে,যত লিখবেন ট্যাগগুলো আপনার তত তাড়াতাড়ি আয়ত্তে আসবে।
ঊক্ত স্টাকচারটা লিখে save as গিয়ে পেজটা সেভ কর,সেভ করার সময় অবশ্যই extension টা চেঞ্জ করে নিবেন। ডিফল্ট extension টা .txt তে থাকবে আপনি এটাকে .html এবং এর আগে যেকোনো একটি নেম দিয়ে সেভ করযেমনঃ basic.html (basic এর পরিবর্তে আপনি যেকোনো নেম দিতে পারেন কিন্তু .html টা পরিবর্তন করতে পারবেন না।পরিবর্তন করলে html ফরমেট এ আসবে না )
তারপর উক্ত সেভকৃত basic.html টা যেকোনো ব্রাউজার দিয়ে ওপেন কর,ওপেন হলে কিছুই দেখতে পারবেন না,একটা সাদা পেজ আসবে।কারন আমরা শুধু Html এর স্টাকচারটা দিয়েছি এর মধ্যে কোনো কিছু include করিনাই।
এখন যদি আবারও আমরা মেইন স্টাকচার নিয়ে কিছু include করি তাহলে কেমন দেখায়,ত চলুন আবার নোটপ্যাড ওপেন করে নিচের স্টাকচার টা লিখুন———
basi<html>
<head>
<title>basic</title>
</head>
<body>
this is my 1st webpage
</body>
</html>
আমরা এখানে Title ব্যবহার করেছি , আমরা আগেই বলেছি < >ও এর মধ্যে যেটি থাকবে তাদের আমরা ট্যাগ বলব। এখানেহচ্ছে একটি ট্যাগ।এর মধ্যে আমরা basic লিখে দিয়েছি আপনি যেকোনো নেম দিতে পারেন, Actually আপনি ব্রাউজারের ট্যাবে যে নেম দেখতে চান সেটাই হচ্ছে Title ।যেমনঃ ফেসবুকে গেলে আমরা ব্রাউজারের ট্যাবে যেমন Facebook দেখতে পাই এটাই হচ্ছে Title ।
তারপর আমরাএবংএই body ট্যাগের মধ্যে this is my 1st webpage লিখে দিয়েছি,এখন আপনি যদি আগের মত পুনরায় এই পেজটা সেভ করে যেকোনো ব্রাউজার দিয়ে ওপেন করেন তাহলে এবার ব্রাউজারে
this is my 1st webpage
এই লেখা দেখতে পারবেন।কারণ আমরা বডি ট্যাগের মধ্যে এই লেখাটা দিয়েছি এবং ব্রাউজারের ঊপরের ট্যাবে basic দেখতে পাবেন কারণ Title ট্যাগে আমরা basic লিখে দিয়েছি।
HEADING:Heading ট্যাগ হচ্ছে ৬ প্রকার।যেমনঃ
1. <h1>……..</h1>
2. <h2>……..</h2>
3. <h3>……..</h3>
4. <h4>……..</h4>
5. <h5>……..</h5>
6. <h6>……..</h6>
তাহলে চলুন আগের মত আবার কাজ শুরু করা যাক।আবার নোটপ্যাডটা ওপেন কর তারপর——–
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>this is heading h1 </h1>
<h2>this is heading h2 </h2>
<h3>this is heading h3 </h3>
<h4>this is heading h4 </h4>
<h5>this is heading h5 </h5>
<h6>this is heading h6 </h6>
</body>
</html>
আমরা যেহেতু Heading নিয়ে আলোচনা করতেছি তাই আমরা Title টা Heading দিয়েছি,আপনি আপনার ইচ্ছে মত যেকোনো নাম দিতে পারেন।
এখন যদি পেজটা আগের নিয়মে সেভ করে ,সেভকৃত ফাইলটা যেকোনো ব্রাউজার দিয়ে ওপেন করেন তাহলে আপনি Heading 1 টা সবার থেকে বড় তারপর ক্রমান্বয়ে heading 2 তারথেকে ছোট,এভাবে Heading 1 টা হবে সবার বড় এবং Heading 6 টা হবে সবার ছোট।যেমনঃনিচে লক্ষ্য কর এইভাবে টেক্সট গুলো বড় থেকে ছোট হবে।
this is heading h1
this is heading h2
this is heading h3
this is heading h4
this is heading h5
this is heading h6
আশা করি বুঝাতে পেরেছি।
আজ এই পর্যন্তই,কোথাও না বুঝলে কমেন্ট করে জানাবেন ……।।আগামী দিন Paragraph,color, text কিভাবে bold,italic করবেন সেগুলো দেখাবো,……। আর ভুল হইলে ক্ষমা করবেন……।।
My fb id: www.facebook.com/morshed.islam.33
Our official fb group: www.facebook.com/groups/infonetbd
*********************ধন্যবাদ*******************