Html Basic Page Structure
হেল্লো বন্ধু এ-ই পর্বে তোমাকে এইচটিএমএল এর গঠন সম্পর্কে ধারণা দেওয়ার চেষ্টা করবো। এবং কিভাবে তোমরা তোমাদের ডিভাইস ও এইচটিএমএল রান করবা সে বিষয়ে আলচনা করবো।
যদি তুমি কম্পিউটার এ এইচটিএমএল রান করাতে চাও তাহলে তোমার কম্পিউটার এ Notepad খুলে ফেলো।
আর যদি তুমি মোবাইলে এইচটিএমএল রান করাতে চাও তাহলে তুমি Spck অ্যাপটি ডাউনলোড করে ফেল।
HTML Run
প্রথমে তোমার কম্পিউটার এ নোটপ্যাড খুলে
নিচের কোডটুকু লিখে ফেলো। (কপি না করে)
<!DOCTYPE html>
<html>
<body>
<h1> My First Heading </h1>
<p> My first paragraph. </p>
</body>
</html>
নিচের মতোঃ
তারপর File এ ক্লিক করে Save as ক্লিক কর।
File Location ঠিক করে File name দাও index.html । ছবিতে খেয়াল করলে দেখতে পাবে index.htm লেখা আছে । index. এর পরে htm বা html যেকোনো একটা দিলেই হবে। তবে html বেশি লেখা হয়। তাই তুমিও html ব্যবহার কর।
তারপর Save এ ক্লিক করে যে জায়গায় index.html ফাইলটা আছে সেই জায়গায় গিয়ে index.html ফাইলটা open কর।
তুমি যদি index.html ফাইলটা সঠিক ভাবে open করতে পার তাহলে উপরের মতো দেখতে পাবে।
এবার ও-ই সকল কোড গুলো মুছে ফেলো বা cut কর। তোমার কিবর্ডে Control+A চেপে backspace চাপ তাহলে সব ক্লিলিয়ার হয়ে যাবে।
নিচের কোডগুলো আবার লেখ তোমার Notpade এ
<!DOCTYPE html>
<html>
<head>
<title>My First Project with TechnlgyInfo </title>
</head>
<body>
<h1> My First Heading </h1>
<p> My first paragraph. </p>
</body>
</html>
চলো এবার কোডগুলো ব্যখ্যা করি।
উপরের কোডগুলো হলো খুবই সাধারণ একটা এইচটিএমএল এর গঠন।
নিচে গঠন সম্পর্কে ব্যখ্যা করলাম। একদম সহজ!
<!DOCTYPE html> এ-ই লাইন দ্বারা বোঝানো হয় যে আমি এইচটিএমএল ৫ ভার্সন লিখছি। তুমি যদি এইচটিএমএল এর অন্য ভার্সন লিখতে তাহলে এখানে অন্য কিছু লিখতে হতো। তুমি চাইলে এটা ছোট হাতের বা বড় হাতের অক্ষরে লিখতে পার। <!DOCTYPE HTML> এভাবেও লিখতে পার <!doctype html> তোমার ইচ্ছা।
দ্বিতীয় লাইনে খেয়াল করলে দেখতে পাবে <html> (শুরু ত্যাগ) লিখা আছে। আর শেষ ত্যাগ লিখা আছে </body> এর পর </html> অর্থাৎ html ত্যাগ বা ইলেমেন্টের ভিতরে নিচের কোডগুলো লিখা তাইনা?
<head>
<title>My First Project with TechnlgyInfo </title>
</head>
<body>
<h1> My First Heading </h1>
<p> My first paragraph. </p>
</body>
একটা ওয়েব পেজ বানাতে গেলে html ত্যাগ এর ভিতরে সকল কোডগুলো লিখা হয়।
তুমি ভালোকরে খেয়াল করলে দেখতে পাবে। যে html ত্যাগ এর ভিতর দুইটা ত্যাগ আছে head এবং body ত্যাগ।৷ head ত্যাগ এর ভিতরে ওয়েবপেজের সকল ইনফরমেশন লিখতে হয় যেমন অয়েব পেজটায় কি কি তথ্য পাওয়া যাবে? কেন এ-ই ওয়ে পেজ তৈরি কর হয়েছে। কে তৈরি করেছে? ইত্যাদি। লেখা হয়।
আর body ত্যাগ এর ভিতর একটা অয়েব পেজের সকল কোড গুলো লেখা হয়।
head ত্যাগ এর ভিতরে title ত্যাগ লিখা আছে খেয়াল করলে দেখতে পাবে।
এ-ই title ত্যাগ দ্বারা যে ট্যাব বা উইন্ডো খুলা আছে তার ট্যাব বা উইন্ডোর টাইটেল লাগাতে ব্যবহার করা হয়।
তার body ত্যাগ এর ভিতরে দেখতে পাবে যে h1 এবং p ত্যাগ লেখা আছে। h1 দ্বারা তুমি পেজেটা যে বিষয়ে লিখছ তার শিরোনাম দেওয়া হয়।
h1 ত্যাগ লেখার সাইজ কে বড় করে দেখায়।
1-6 পর্যন্ত (h1, h2, h3, h4, h5, h6) এ-ই ত্যাগ। যতই কম সংখ্যা ব্যবহার করবা ততই লেখার সাইজ ছোট হতে থাকবে।
উদাহরণ দেখ ভালো বুঝতে পারবা।
<h1> Bangladesh </h1>
<h2> Bangladesh </h2>
<h3> Bangladesh </h3>
<h4> Bangladesh </h4>
<h5> Bangladesh </h5>
<h6> Bangladesh </h6>
output :
তুমি কোড লিখে দেখতে পার।
তার পর body ত্যাগ এর ভিতরে p নামের একটা ত্যাগ আছে। তুমি যখন পরিক্ষার খাতায় রচনা লিখ তখন রচনা কিন্তু একবারে পেজের শুরু থেকে শেষ পর্যন্ত লিখলেও পেজে মাঝে একটু ফাঁকা দাও। মানে ছোট ছোট প্যারাগ্রাফ আকারে লিখ যাতে লেখাটা সুন্দর দেখায়। তেমনি এ-ই p ত্যাগ অয়েব পেজের লিখাকে প্যারাগ্রাফ আকারে করে ফেলে। তুমি নিচে খেয়াল কর।
উদাহরণ ঃ
উপরে তোমাকে বিভিন্ন কালার দিয়ে দেখাই দিছি কোথায় শুরু ত্যাগ এবং কোথায় শেষ ত্যাগ।
উপরে তিনটা p ত্যাগ ব্যবহার কিরেছি। এর Output
হবে। এরকমঃ
তুমি হয়তো ভাবছ যে একলাইন গ্যাপ দিয়ে লিখলেই তো হয় তাহলে p ত্যাগের কি দরকার? না! তুমি যা ভাবছ তা সম্ভব না। তুমি p ত্যাগ বাদে লিখে দেখ কাজ হবেনা। দেখতে পার।
p ত্যাগ এর বড় একাটা নাম প্যারাগ্রাফ ত্যাগ। paragraph এর p নিয়েই সংক্ষিপ্ত করে <p> ত্যাগ তৈরি করা হয়েছে তাই একে প্যারাগ্রাফ ত্যাগ বলা হয়। (তুমি সবসময় প্যারাগ্রাফ ত্যাগ বলবা তাহলে তোমার মনে থাকবে এ-ই ত্যাগ এর কাজটা!)
তাহলে তুমি শিখে গেল এইচটিএমএল এর ব্যাসিক পেজের গঠন সম্পর্কে। প্রত্যেকটা HTML পেজ তৈরি করতে গেলে প্রথমে এ-ই এইচটিএমএল এর গঠন টা লিখে নিতে হবে তারপর body ত্যাগ এর ভিতরে লিখতে হবে।
এই পর্বে এতটুকুই পরবর্তী পর্বে আর কিছু শেখানোর চেষ্টা করব। ভালো থাকো সুস্থ থাকো এ-ই কামনা করি।
তুমি শেখ অন্যকেউ শিখতে সাহায্য কর। পোস্ট তোমরা বন্ধুদের মাঝে শেয়ার কর যাতে তোমার বন্ধুরাও HTML শিখতে পারে।
পোস্ট ভালো লাগলে অবশ্যয় কমেন্ট করুন।