«

»

আসুন শিখি HTML। ধারাবাহিক পর্বের ১ম পর্ব :

HTML সম্পর্কে যখন আমি জানতে পারলাম তখন থেকেই ওয়েব পেজ গুলো দেখলে অন্যরকম একটা অনূভুতি কাজ করে।যেই পেজ গুলো পূর্বে দেখলে রহস্যের বেড়াজাল ছাড়া কিছুই মনে হতনা আজ মনে হচ্ছে এমন রহস্য আমি নিজেও ইচ্ছে করলে হয়তবা উপস্থাপন করতে পারি সাড়া বিশ্বের সাম্‌নে।শুধু আমি নই বরং বলা উচিত আমরা সবাই পারি। তার জন্য অনেক গুলো মজার বিষয় সম্পর্কে আমাদের ভালোভাবে জানতে হবে।তন্মধ্যে HTMLঅন্যতম।

আজ আমি আপনাদের সাথে HTML নিয়েই গল্প করব।

গল্পের ১ম অংশ :

HTML দ্বারা আমরা আমাদের ওয়েবসাইট তৈরি করতে পারি।এটি একটি markup ল্যাংগুয়েজ, এটি কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়।HTMLএর অর্থ হচ্ছে HyperText Markup Language.

এটি শেখার পর যদি আমরা CSS শিখি তাহলে তৈরিকৃত পেজটিতে আমরা কিছুটা প্রান সঞ্চার করতে পারবো।এরপর জাভাস্ক্রিপ্ট, PHP+DATABASE শিখে আমরা একটি পূর্ণাঙ্গ ওয়েবসাইট তৈরি করতে পারবো।

যেহেতু এটি একটি কোড ভিত্তিক ল্যাংগুয়েজ তাই এটিকে লেখার জন্য আমাদের প্রয়োজন নোটপ্যাড।বন্ধুরা নোটপ্যাড তৈরিতো? হুম তাহলে চলুন আগে বাড়ি…

যা এখনি জানা দরকার ঃ

ü  HTML এলিমেন্ট

ü  HTML ট্যাগ

ü  HTML অ্যাট্রিবিউট

এলিমেন্টস : এটি HTML পেজ এর প্রত্যেকটি অংশকে বর্ণনা করে।এলিমেন্টস

গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। একটা ওয়েব পেজ এর যা কিছু আমাদের চোখের সামনে দেখা যায় যেমন কোনো ব্যানার, নেভিগেশন লিঙ্ক, প্যারাগ্রাফ টেক্সট সবকিছুই ওই পেজটির এলিমেন্ট।এলিমেন্ট মূলত তিনটি অংশ নিয়ে গঠিত,

  • opening tag
  • এলিমেন্টের ধারন্‌কৃত অংশ
  • closing tag

প্রত্যেকটি ট্যাগ এর কিওয়ার্ড গুলো দুটি angle bracket দ্বারা আবদ্ধ থাকবে।closing tag গুলোতে কিওয়ার্ড এর পূর্বে একটি back slash ব্যবহার করতে হবে। ট্যাগ গুলো সাধারনত জোড়াভাবে ব্যবহার হয়। আসুন দেখি ট্যাগের চেহারাঃ

<html>

………………

</html>

<html>

welcome to techtweets

</html >

এই অংশটুকু একটি নোটপ্যড এ লিখে .html দিয়ে সেভ করে তারপর ওপেন করে দেখুন !!

html doccuments অর্থাৎ একটা ওয়েব পেজের সবকিছুই এই ট্যাগ এর মধ্যে আবদ্ধ থাকবে। ওয়েব ব্রাউজারস্‌ গুলো আপনার দেয়া html ডকুমেন্টস ই read করে এবং সেটাকে ওয়েব পেজ রুপে প্রদর্শন করে। এই ট্যাগ এর ভিথরে এরপর প্রথমে আসে body ট্যাগ।চলুন তার চেহারাটাও দেখে নিই,

<body>…………</body>

বডি ট্যাগ এর মাঝে যে টেক্সট লিখবেন তা হচ্ছে পেজের দৃশ্যনীয় অংশ।

Example 

<html>
<body> 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

নিজে চেষ্টা করুন।

উপরের চার্ট টিতে চারটি ট্যাগ ব্যাবহার করা হয়েছে। আমরা <html> এবং <body> ট্যাগ সম্পর্কে  জানলাম,কিন্তু

<h>…</h> হল   heading ট্যাগ। অর্থাৎ আপনি ওয়েব পেজ এর মধ্যে যদি heading ব্যবহার করতে চান তবে তা এই ট্যাগ এর মাধ্যমে করতে পারবেন। heading tag আপনি ব্যাবহার করতে পারবেন <h1> থেকে <h6> এর মধ্যে।

<h1> welcome to my website </h1>

<h2> This is my first site </h2>

–         — — – – – – – –  –  –  –

<h6> this is a heading </h6>

আর <p> ট্যাগ  টি হল প্যারাগ্রাফ ট্যাগ। আপনার ব্যাবহৃত সব প্যারাগ্রাফ এই ট্যাগ দিয়েই লিখতে হবে।

<p1> I am a good friend for all </p1>

<p2 > we know Mr. jakir is a good person </p2>

এভাবে লিখে যাবেন।

দয়া করে মনে রাখুন এবং অনুশীলন এর সময় মেজাজ গরম হওয়া থেকে নিজেকে হেফাজত করুন ঃ

অবশ্যই অবশ্যই opening tag এর পর (elements লিখে ) closing tag ব্যবহার করবেন।তা না হলে কখনই ওয়েব পেজ এ আপনার কাঙ্ক্ষিত লেখা দেখতে পাবেন্‌না।

উপরোক্ত গল্পের সারসংক্ষেপ ঃ

  • HTML : Hyper text markup language
  • HTML একটি ওয়েব পেজকে বর্ননার জন্য   markup tag ব্যবহার করে।
  • প্রত্যেক্টি ট্যাগ সর্বদাই জোড়াভাবে আসে, অর্থাৎ   opening tag এবং closing tag। যেমনঃ <html>………..</html>
  • ট্যাগ এর কিওয়ার্ড গুলো দুটি angle bracket দ্বারা আবদ্ধ থাকে।যেমনঃ  <html>
  • একটি ওয়েব পেজ এর দৃশ্যনীয় সব কিছুই হল  html documents, তাই একে web page  ও বলা হয়।
  • <html>…………</html> এটি হচ্ছে  html ট্যাগ
  • <body>……………….</body> এটি হচ্ছে বডি ট্যাগ
  • <p>………</p> এটি ব্যাবহার করে প্যারাগ্রাফ লিখা যায়।
  • <h>………….</h> এটি দ্বারা আপনি ওয়েব পেজের    heading   তথা শিরনাম দিতে পারবেন।
  • Html   ডকুমেন্টস নোটপ্যাড এ লিখার পর এটিকে    .html    দিয়ে সেভ করতে হবে।

আজকে আর গল্প করতে পারছিনা বলে আন্তরিক ভাবে দুঃখিত। আর কথা না বাড়িয়ে আসুন নোটপ্যাড নিয়ে ঝাঁপিয়ে পড়ি…………


এ সম্পর্কিত আরো কিছু টুইট:

HTML শিখুন HTML5 সহ (পার্ট-4) HTML Attribute
আমি শিখছি pHp । আপনি সাথে আছেন তো? (পর্বঃদুই)
আসুন শিখি পিএইচপিঃপর্ব-১৮
মাইএসকিউএল MySQL part-6 (মাইএসকউএল এর অপারেটর)
নিয়ে নিন সুন্দর ভাবে ভেসে আসা রিলেটেড পোস্ট এর প্লাগিন
সফটওয়্যার এবং গেমস ডাউনলোড সাইট এর জন্য জটিল একটি ওয়ার্ডপ্রেস থিম 🙂
একটি ওয়েবসাইট হোক আপনার সারা জীবনের স্থায়ী উপার্জন

মন্তব্য দিনঃ

comments

About the author

Mehedi

বিজ্ঞানের এই জগৎটা একটা নিরন্তর পুনবর্ণর্নার, পুনঃআবিষ্কারের জগৎ । যিনি যত নিষ্ঠার সাথে বয়ান করে যাবেন, তাঁর তত বেশি আবেদন। আমরা যারা ক্ষুদ্রের কাছেও ক্ষুদ্র তাদের মজাটাও যে বয়ানে, যে বয়ান যত নিবিষ্ট, যত বাস্তব, তত তার জীবনের সমান্তরাল হয়ে ওঠা। বিজ্ঞান জীবনের বিকল্প নয়, জীবনের বিকল্প আসলে কিছু হতে পারেনা।

Permanent link to this article: http://techtweets.com.bd/web-developing/bright-space/506

6 comments

Skip to comment form

  1. LuckyFM

    আপনার উপস্থাপনার ভঙ্গিটা সুন্দর

    1. bright space

      ধন্যবাদ।খুশি হলাম।দোয়া করবেন

  2. ঐ ছেলেটি
    jakir

    মজা করে উপস্থাপন করলেন। সুন্দর হয়েছে, ধন্যবাদ।

  3. Sayeam

    দারুণ। জোসসসসসসসস………..;)

    1. bright space

      খুব খুশি হলাম।
      ধন্যবাদ আপনাকে।

  4. তাওহিদুল ইসলাম

    অনেক ভালো উদ্দোগ , কোড লেখার ক্ষেত্রে কোডকে হাইলাইটস করা উচিত। এডমিনে প্রতি : Syntax highlighter ব্যবহার করুন

মন্তব্য করুন