«

»

HTML শিখুন HTML5 সহ (পার্ট-3) HTML Element

দেরি করে পোস্ট করার জন্য সবার কাছে আন্তরিক ভাবে দুঃখিত :(  আগের দুটি টুইট, প্রয়োজন হলে দেখে আসতে পারেন।

HTML শিখুন HTML5 সহ (পর্ব-১) Intro to HTML

HTML শিখুন HTML5 সহ (পার্ট-২) My First web Page

এর আগের টুইটে আমরা কয়েকটি নতুন শব্দ পেয়েছি। যেমন: HTML Element , body Elemont, Heading Element, Paragraph Element ইত্যাদি। এবার চলুন এগুলো সম্পর্কে একটু ভালো ভাবে জেনে নইই।

HTML Element: HTML Element দ্বারাই HTML Document বর্ননা করে।

HTML Element এর বৈশিষ্টঃ

  • HTML element একটি start tag বা opening tag দ্বারা শুরু হয়।
  • HTML element একটি end tag বা closing tag শেষ হয়।
  • start এবং end tag এর মধ্যের সবকিছুই element content
  • কিছু HTML element এর empty content ও থাকতে পারে।
  • Empty element  start tag এর মধ্যে শেষ করা হয়।

HTML elements এর অনেক attributes বা বৈশিষ্ট রয়েছে যা খুবই দরকারি। এগুলু নিয়ে পরে আলোচনা করবো।

 

HTML Element এ তিনটি অংশ থাকে।

  1. একটি opening tag
  2. একটি closing tag
  3. ও HTML  Element Content

উদাহরন নিচের HTML Element লক্ষ করুনঃ

<h1>Hi! Welcome to my site(Heading)</h1>

এখানে <h1> হচ্ছে একটি opening tag। )</h1> হচ্ছে closing tag। এবং Hi! Welcome to my site(Heading) হচ্ছে HTML  Element Content

 

Nested HTML Element

একটি Nested HTML Element এর মধ্যে যদি আরেকটি HTML Element থাকে তবে তাকে Nested HTML Elements বলে।

নিচের কোড গুলো দেখুনঃ

এখানে;

চারটি HTML Element রয়েছে। যথাঃ html, body, h, এবং p Elemont.

html element এর মধ্যে আরেকটি body element রয়েছে। আবার body element এর মধ্যে রয়েছে h element ও p element ।

সুতরাং বলা যায় যে ওয়েব পেজ হল কতগুলো Nested HTML Element বা HTML Element এর সমষটি। তাই নয় কি?

Empty HTML Elements : আগেই বলেছি HTML এ  Empty HTML Elements থাকতে পারে।

সকল HTML Element এ তিনটি অংশ থাকে। যে গুলোর মধ্যে কোন content থাকে না সেগুলো কে বলা হয় Empty HTML Elements।

যেমন <br/>

এটি একটি Empty HTML Element যার সাহয্যে নতুন লাইন দেওয়া হয়। Paragraph এ অনেক সময় নতুন লাইন দিতে হয়। এটি দিয়ে নতুন লাইন দেওয়া হয়। পরে এর ব্যবহার দেখবেন পাবেন। আর আপনি ও চেষ্টা করুন।

 

আমরা আগে যে Web page তৈরি করেছি তা সম্পুর্ন নয়। প্রত্যেক সম্পুর্ন Web page এ চারটি প্রয়োজনীয় Element  থাকে এগুলো হলো্:

  1. html
  2. head
  3. title, এবং
  4. body elements

আমরা এর আগে html ও body element সম্পর্কে জেনেছি। এবার head ও title element সম্পর্কে জানব।

 

আগে আসি head element এ ।

head element:
head element এর মধ্যে Web page এর সকল ইনফরমেশন থাকে। এটির মধ্যে যা থাকে তা দেখা যায় না। তবে এটি খুবি ধরকারি। এর মধ্যে আরেকটি element থাকে title element।
title element:
title element ওয়েব পেজ এর title প্রকাশ করতে ব্যবহার করা হয়।

আমরা কোনন সাইটে গেলে তার উপরে সাইটের টাইটেল প্রদর্শিত হয়। যেমন ফেসবুকে এ গেলে  লেখা উঠে Facebook, Google এ গেলে  লেখা উঠে Google ইত্যাদি।

এবার আমরা একটি সম্পুর্ন সাইট তৈরি করি। কি কি কোড লিখছি তা একটু দেখে নিন। এবং নিজে চেষ্টা করুন। আমি নিচের কোড গুলো লিখছি।

আপনি নিজের ইচ্ছে মত পরিবর্তন করে দেখুন কি পরিবর্তন করলে কি হয়। আমার কোড গুলোর আউট পুট নিচের মত হবে।

এ সাইটের মধ্যে প্রধান চারটি উপাদানই রয়েছে। নিজে নিজে চেষ্টা করুন। ধন্যবাদ সবাইকে।

পরের পর্বঃ

HTML শিখুন HTML5 সহ (পার্ট-4) HTML Attribute


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

WordPress ব্লগে এডমিন বার সরিয়ে পেলা
জেনে নিন কার জন্য কোনটা দরকার ! WordPress, Drupal, Joomla
Css শেখার জন্য একটি PDF ফাইল ডাউনলোড করে নিন (সম্পুর্ণ বাংলায়)
জিতে নিন আকর্সনীয় প্রাইজ অতি সহজে
সেইরকম একটা SUBCRIPTION BOX WIDGET !! ব্লগস্পট ব্লগ এর জন্য !!!
ডাউনলোড অলরাউন্ডার ভিডিও কনভার্টার (উইন্ডোজ + ম্যাক) দিয়ে। সর্বশেষ ভার্সন এবং দেখে নিন পূর্ণাঙ্গ ফটো...
আপনার Android মোবাইল চার্জ হবে এত দ্রুত যে আপনি অবাক হয়ে যাবেন। নিয়ে নিন ছোট একটি Software।

মন্তব্য দিনঃ

comments

About the author

জাকির হোসাইন

প্রোগ্রামিং বা ফ্রীল্যান্সিং নিয়ে কোন প্রশ্ন থাকলে টেকটুইটস সাহায্য বিভাগে পোস্ট দিতে পারেন অথবা আমাকে ফেসবুকে মেসেজ দিতে পারেন।

Permanent link to this article: http://techtweets.com.bd/web-developing/jakirbdl/616

25 comments

Skip to comment form

  1. LuckyFM

    sir শেষ
    কিন্তু একটা সমস্যা, তা হল পোষ্টের ইমেজ গুলো কিন্তু চেন্টারে আসেনা, আশা করি টেকনিকালি কি সমস্যা দেখবেন

    1. ঐ ছেলেটি
      jakir

      এত তাড়াতাড়ি শেষ করলে কেমনে হবে? :( তাহলে বুঝা যাচ্ছে ছাত্র হিসেবে বেশ সুবিধার:P
      ওকে ওটা দেখব।

  2. Sayeam

    বেচেঁ আছেন তাহলে!!! আমি তো ভাবছি আপনি সাইট-টার কথা ভুলেই গেছেন!!! যাই হোক, অতি প্রতিক্ষিত টিউনটি অতি দ্রুত(!) পোস্ট করার জন্য ধন্যবাদ দিলাম।

    1. ঐ ছেলেটি
      jakir

      আমি অনেক দৌড়ের উপর ছিলাম তাই এত দ্রুত(!) পোস্ট দিতে পারছি। সরি। ইনশাআল্লাহ এবার থেকে ঠিক মত দিতে চেষ্টা করব।

  3. মাখন

    আমারো শেষ। আসলে আপনি অনেক ভাল লেখক হতে পারবেন। দোয়া রইল। 😉

    1. ঐ ছেলেটি
      jakir

      অনেক ধন্যবাদ মাখন সাহেব।

    2. রুবেল অরিয়ন

      স্যার ‘ডিভাইস’ পরীক্ষা থাকা স্বত্বেও অন-লাইনে এসে আপনার পড়া শেষ করেছি!
      পরের টুইট অপেক্ষাকৃত দ্রুত পাবো, আশা করি! 😉

    3. ঐ ছেলেটি
      jakir

      পাবেন রুবেল ভাই পাবেন।

  4. ashraf

    Hello! Where is part 4,5 and so on??
    Can you Pls post these link as soon as possible.

    Also thanks for posting…and waiting for new post.

    1. ঐ ছেলেটি
      jakir

      আমি লিখছি, যত দ্রুত পারি আমি পোস্ট করব। ধন্যবাদ আপনাকে।

  5. aowal

    স্যার স্কুল শেষ করে ধাপে ধাপে কলেজে পড়ার ইচ্ছা আছে তাই এত লেট করে পর্ব গুলি দিলে তো বুড়ো হয়ে যাবো।আশা করি সামনে বিষয় টা বিবেচনা করবেন। ধন্যবাদ।

    1. ঐ ছেলেটি
      jakir

      আউয়াল ভাই আমি কি করব? স্যারেরা একদিন এক পরীক্ষা রাখে যে টুইট করার সময় পাই না। আর আমি পরের পর্ব প্রায় লিখে রাখছি কালকে পাবেন ইনশাআল্লহ।

  6. aowal

    :head element এর মধ্যে Web page এর সকল ইনফরমেশন থাকে। এটির মধ্যে যা থাকে তা দেখা যায় না। তবে এটি খুবি ধরকারি”। এই গুলির Elements Content ্যদি আমরা না দিয়ে থাকি তা হলে কি ভাবে আসবে? আর কি ভাবে জানবো এই ইনফারমেশন গুলি।

    1. ঐ ছেলেটি
      jakir

      Elements Content না দিলে আসবে না। জানতে ও পারবেন না।

  7. bright space

    আপনার ব্যস্ততার সাগরে ভাটা পড়েছে তাহলে।
    ফিরেয় আসার জন্য ধন্যবাদ। ভালো থাকবেন স্যার @ জাকির সার

  8. sayedalihasan

    আসসালামু আলাইকুম।
    আপনি বলেছেন। “head element এর মধ্যে Web page এর সকল ইনফরমেশন থাকে। এটির মধ্যে যা থাকে তা দেখা যায় না। তবে এটি খুবি ধরকারি”।
    কিন্তু এর কোন উদাহারণ দেন নি।

    1. ঐ ছেলেটি
      jakir

      শিখার জন্য দরকারী না তবে ওয়েব সাইটের জন্য ধরকারী। আমি একটা উদাহরন এর পরের পর্বে দিয়ে দিব। ধন্যবাদ সুন্দর ও মনোযোগ দিয়ে গুলো পড়ার জন্য।

  9. shahed

    ভাই খুবই ভালো লেগেছে।দোয়াকরি অনেক বড় হন।ভাই চতু্র্থ পর্ব খুজে পাচছি না।

    1. ঐ ছেলেটি
      jakir

      http://techtweets.com.bd/web-developing/jakirbdl/772 এটা দেখুন।

  10. shahed

    ধন্যবাদ। ভাই এটা কত পর্ব।

    1. ঐ ছেলেটি
      jakir

      চতুর্থ পর্ব।

    2. সায়েম

      হা…হা….হা…. প্রোগ্রামারের মাথা হ্যাং হয়ে গেছে…. এটা ৩য় পর্ব… 😉

    3. ডিজে আরিফ

      সেটাই মনে হচ্ছে, তৃতীয় পর্বকে চতুর্থ পরবে বলছেন কেন? মাথা রিস্টার্ট দেন, 😆

    4. ঐ ছেলেটি
      jakir

      আমি উপরের লিঙ্কটির কথা বলছি :)
      পরের দুটি কমেন্ট একটু পড়েন। তাছাড়া সবাইতো দেখতেছে এটা তৃতীয় পর্ব। 😛
      এখন ও বিয়ে করি নি যে মাথা হ্যাং হবে 😉

  11. Masud

    bai khove valo hoysa,

মন্তব্য করুন